title: jquery mobile custom css trouble with a.class:hover
body: <p>I am working with the jquery mobile framework 1.0 and I am attempting to implement a gradient background on the below a.grid-anchor with css :hover and can not seem to get it to work. This anchor is <strong>NOT</strong> using the jq mobile <code>data-role="button"</code>.</p>
  
  <pre><code>&lt;div data-role="content"&gt;   
  
      &lt;div id="ri-grid" class="ui-grid-c"&gt;
          &lt;div class="ui-block-a"&gt;
              &lt;a class="grid-anchor" href="#page2" data-transistion="slide"&gt;
                  &lt;div class="ui-bar rm-box border-br"&gt;
                      &lt;ul&gt;
                          &lt;li&gt;Sample text&lt;/li&gt;
                          &lt;li&gt;more ttxt...&lt;/span&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;div class="icon-ir"&gt;&lt;/div&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/a&gt;
          &lt;/div&gt;...&lt;/snip&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>a.grid-anchor:hover {
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
  }
  </code></pre>
  
  <p>*Using on safari only</p>