title: Incorrect color on hover for jQuery Mobile ListView Item
body: <h2>Environment</h2>
  <ul>
  <li>jQuery Mobile 1.3.0</li>
  <li>Ruby on Rails 3.2.12</li>
  <li>Chrome and Firefox latest or close to latest builds (can get exact versions if needed)</li>
  <li>OS X Lion 10.8.2</li>
  </ul>
  <h2>Problem</h2>
  <p>Using jQuery Mobile with Rails on the back end, I am getting an odd hover effect for only list view items.  The picture below shows what a listview item looks like while hovered on.  If I add an icon/button to the right of the listview item, only the left has the issue as shown in the second picture.  All other elements with hover effects work fine.</p>
  <h2>Evidence</h2>
  <p>Without icon, on hover (listview item):</p>
  <p><img src="https://i.stack.imgur.com/adf1d.png" alt="demonstrating list view highlight error" /></p>
  <p>With icon, on hover (listview item):</p>
  <p><img src="https://i.stack.imgur.com/HtQ2y.png" alt="enter image description here" /></p>
  <p>With icon, on hover (listview item right icon):
  <img src="https://i.stack.imgur.com/Dkw6Z.png" alt="enter image description here" /></p>
  <h2>Question</h2>
  <p>Why, on hover, do my listview items turn an ugly black instead of being the nice hover gradient that everything else seems to handle without issue (including an icon/button on the listview itself)?</p>
  <h2>Code</h2>
  <p>The following is my HAML template code for the listview.</p>
  <pre><code>%ul{&quot;data-filter&quot; =&gt; &quot;true&quot;, &quot;data-inset&quot; =&gt; &quot;true&quot;, &quot;data-role&quot; =&gt; &quot;listview&quot;}
  - @item.subitem.each do |item|
    %li{&quot;data-theme&quot; =&gt; &quot;c&quot;}
      %a{&quot;data-prefetch&quot; =&gt; &quot;&quot;, &quot;data-transition&quot; =&gt; &quot;slide&quot;, href: edit_item_subitem_path(@item, subitem), :rel =&gt; &quot;external&quot;}
        = item.text
        - if item.set
          %span.ui-li-count.ui-btn-up-c
            ✓
  </code></pre>
  <p>And this is what Rails/HAML generates:</p>
  <pre><code>&lt;ul data-filter='true' data-inset='true' data-role='listview' data-split-icon='gear' data-split-theme='b'&gt;
  &lt;li data-theme='c'&gt;
    &lt;a data-transition='slide' href='/items/5' rel='external'&gt;
      Testing
      &lt;span class='ui-li-count ui-btn-up-c'&gt;
        2
      &lt;/span&gt;
    &lt;/a&gt;
    &lt;a data-theme='c' href='/items/5/edit'&gt;
      &lt;span class='ui-icon ui-icon-gear ui-icon-shadow'&gt;&lt;/span&gt;
    &lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
    
  <p>And here is the resulting &quot;computed&quot; source that jQuery Mobile generates (I left out the search/filter code):</p>
  <pre><code>&lt;ul data-filter=&quot;true&quot; data-inset=&quot;true&quot; data-role=&quot;listview&quot; data-split-icon=&quot;gear&quot; data-split-theme=&quot;b&quot; class=&quot;ui-listview ui-listview-inset ui-corner-all ui-shadow&quot;&gt;
  &lt;li data-theme=&quot;c&quot; data-corners=&quot;false&quot; data-shadow=&quot;false&quot; data-iconshadow=&quot;true&quot; data-wrapperels=&quot;div&quot; data-icon=&quot;false&quot; data-iconpos=&quot;right&quot; class=&quot;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&quot;&gt;
      &lt;div class=&quot;ui-btn-inner ui-li ui-li-has-alt&quot;&gt;
          &lt;div class=&quot;ui-btn-text&quot;&gt;
              &lt;a data-transition=&quot;slide&quot; href=&quot;/items/5&quot; rel=&quot;external&quot; class=&quot;ui-link-inherit&quot;&gt;
                  Testing
                  &lt;span class=&quot;ui-li-count ui-btn-up-c ui-btn-corner-all&quot;&gt;
                      2
                  &lt;/span&gt;
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;a data-theme=&quot;c&quot; href=&quot;/items/5/edit&quot; title=&quot;&quot; class=&quot;ui-li-link-alt ui-btn ui-btn-icon-notext ui-btn-up-c&quot; data-corners=&quot;false&quot; data-shadow=&quot;false&quot; data-iconshadow=&quot;true&quot; data-wrapperels=&quot;span&quot; data-icon=&quot;false&quot; data-iconpos=&quot;notext&quot;&gt;
          &lt;span class=&quot;ui-btn-inner&quot;&gt;
              &lt;span class=&quot;ui-btn-text&quot;&gt;&lt;/span&gt;
              &lt;span data-corners=&quot;true&quot; data-shadow=&quot;true&quot; data-iconshadow=&quot;true&quot; data-wrapperels=&quot;span&quot; data-icon=&quot;gear&quot; data-iconpos=&quot;notext&quot; data-theme=&quot;c&quot; title=&quot;&quot; class=&quot;ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all ui-btn-icon-notext&quot;&gt;
                  &lt;span class=&quot;ui-btn-inner&quot;&gt;
                      &lt;span class=&quot;ui-btn-text&quot;&gt;
                      &lt;/span&gt;
                      &lt;span class=&quot;ui-icon ui-icon-gear ui-icon-shadow&quot;&gt;&amp;nbsp;&lt;/span&gt;
                  &lt;/span&gt;
              &lt;/span&gt;
          &lt;/span&gt;
      &lt;/a&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  <h2>Thanks</h2>
  <p>Thanks in advance, let me know if you need any additional information.  Also, I didn't tag this Rails as I don't think it relates to Rails, but if I should, or if it does end up being the root cause, I will tag it as such.</p>