Currently, I am engaged in developing a project using the jquery mobile framework 1.0. My goal is to create a gradient background effect on the anchor defined below as .grid-anchor when users hover over it. However, despite my efforts, I have been unsuccessful in getting this feature to work properly with CSS :hover. It's important to note that this specific anchor does not utilize the jq mobile attribute data-role="button".
<div data-role="content">
<div id="ri-grid" class="ui-grid-c">
<div class="ui-block-a">
<a class="grid-anchor" href="#page2" data-transistion="slide">
<div class="ui-bar rm-box border-br">
<ul>
<li>Sample text</li>
<li>more ttxt...</span></li>
<li><div class="icon-ir"></div></li>
</ul>
</div>
</a>
</div>...</snip>
CSS:
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+ */
}
*This code works specifically for Safari.