環境
- jQuery Mobile 1.3.0
- Ruby on Rails 3.2.12
- ChromeおよびFirefoxの最新または最新のビルドに近い（必要に応じて正確なバージョンを取得できます）
- OS X Lion 10.8.2
問題
バックエンドでRailsを使用してjQueryMobileを使用すると、リストビューアイテムに対してのみ奇妙なホバー効果が得られます。下の図は、リストビューアイテムにカーソルを合わせたときの様子を示しています。リストビューアイテムの右側にアイコン/ボタンを追加すると、2番目の図に示すように左側だけに問題が発生します。ホバー効果を持つ他のすべての要素は正常に機能します。
証拠
アイコンなし、ホバー（リストビューアイテム）：
アイコン付き、ホバー（リストビューアイテム）：
アイコン付き、ホバー（リストビューアイテムの右アイコン）：
質問
ホバー時に、リストビューアイテムが、他のすべてが問題なく処理できるように見える（リストビュー自体のアイコン/ボタンを含む）ホバーグラデーションではなく、醜い黒に変わるのはなぜですか？
コード
以下は、リストビューのHAMLテンプレートコードです。
%ul{"data-filter" => "true", "data-inset" => "true", "data-role" => "listview"}
- @item.subitem.each do |item|
%li{"data-theme" => "c"}
%a{"data-prefetch" => "", "data-transition" => "slide", href: edit_item_subitem_path(@item, subitem), :rel => "external"}
= item.text
- if item.set
%span.ui-li-count.ui-btn-up-c
✓
そして、これはRails/HAMLが生成するものです。
<ul data-filter='true' data-inset='true' data-role='listview' data-split-icon='gear' data-split-theme='b'>
<li data-theme='c'>
<a data-transition='slide' href='/items/5' rel='external'>
Testing
<span class='ui-li-count ui-btn-up-c'>
2
</span>
</a>
<a data-theme='c' href='/items/5/edit'>
<span class='ui-icon ui-icon-gear ui-icon-shadow'></span>
</a>
</li>
そして、jQuery Mobileが生成する「計算された」ソースは次のとおりです（検索/フィルターコードは省略しました）。
<ul data-filter="true" data-inset="true" data-role="listview" data-split-icon="gear" data-split-theme="b" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
<li data-theme="c" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="false" data-iconpos="right" class="ui-btn ui-btn-icon-right ui-li ui-li-has-alt ui-li-has-count ui-first-child ui-last-child ui-btn-up-c">
<div class="ui-btn-inner ui-li ui-li-has-alt">
<div class="ui-btn-text">
<a data-transition="slide" href="/items/5" rel="external" class="ui-link-inherit">
Testing
<span class="ui-li-count ui-btn-up-c ui-btn-corner-all">
2
</span>
</a>
</div>
</div>
<a data-theme="c" href="/items/5/edit" title="" class="ui-li-link-alt ui-btn ui-btn-icon-notext ui-btn-up-c" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="false" data-iconpos="notext">
<span class="ui-btn-inner">
<span class="ui-btn-text"></span>
<span data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="gear" data-iconpos="notext" data-theme="c" title="" class="ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all ui-btn-icon-notext">
<span class="ui-btn-inner">
<span class="ui-btn-text">
</span>
<span class="ui-icon ui-icon-gear ui-icon-shadow"> </span>
</span>
</span>
</span>
</a>
</li>
</ul>
ありがとう
よろしくお願いします。追加情報が必要な場合はお知らせください。また、このRailsは、Railsとは関係がないと思うのでタグ付けしませんでしたが、必要な場合、または根本的な原因である場合は、そのようにタグ付けします。