环境
- jQuery 移动 1.3.0
- Ruby on Rails 3.2.12
- Chrome 和 Firefox 最新或接近最新版本(如果需要,可以获得确切版本)
- OS X 狮子 10.8.2
问题
在后端使用带有 Rails 的 jQuery Mobile,我得到了一个奇怪的悬停效果,只有列表视图项。下图显示了列表视图项在悬停时的外观。如果我在列表视图项的右侧添加一个图标/按钮,则只有左侧有问题,如第二张图片所示。所有其他具有悬停效果的元素都可以正常工作。
证据
没有图标,悬停时(列表视图项):
带有图标,悬停时(列表视图项):
带有图标,悬停时(列表视图项目右侧图标):
问题
为什么在悬停时,我的列表视图项目会变成难看的黑色,而不是其他所有东西似乎都可以毫无问题地处理的漂亮的悬停渐变(包括列表视图本身的图标/按钮)?
代码
以下是我的列表视图的 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 无关,但如果我应该这样做,或者它最终成为根本原因,我会这样标记它。