jquery - 完全替换处于事件状态的图像以覆盖静态图像 Jquery Mobile

Question

我正在尝试将处于事件状态的图像替换为 jQuery Mobile 中基本上是按钮的图像，但是，我有 data-role="none"设置在 <a>标签。这样做的原因是我不希望将样式应用于 jQuery Mobile 通常应用的这些“按钮”。

我已经可以正常工作了，但是，即使我在 CSS 中将它们设置为完全相同的大小和位置，我也无法将图像(红色)完全切换到黑色图像上。

尝试在 jQuery Mobile 中完成此操作的最佳实践是什么？

HTML:

<div data-role="page" id="home">
  <div data-role="content">
     <div class="maine">
        <a href="#" data-role="none"><img src="images/icons/Maine-Lighthouse@2x.png" style="text-align:left;margin-top:20px;margin-left:890px;" width="98px" height"85px"></a>
      </div>
   </div>
</div>

CSS:

   body .ui-content .maine a:active {

      background: url(images/icons/Maine-Lighthouse-Hover@2x.png) !important;
      background-repeat: no-repeat !important;
      text-align:left;
      margin-top:20px;
      margin-left:890px;
      width:98px;
      height:85px;
      z-index: 1000 !important;
   }

这是 fiddle :

http://jsfiddle.net/codewarrior_777/NppNA/13/

Answer 1

使用纯 CSS，我可以想到 this

CSS

.maine a img {
     background-repeat: no-repeat !important;
     text-align:center !important;
     background-size: 98px 85px;
     width:98px !important;
     height:85px !important;
     z-index: 10 !important;
 }

.maine a:active img {
     background-image: url(http://syntheticmedia.net/Maine-Lighthouse-Hover@2x.png) !important;
     background-repeat: no-repeat !important;
     text-align:center !important;
     width:98px !important;
     height:85px !important;
     z-index: 10000 !important;
 }

编辑 -

1. Fiddle使用 img 标签(图片周围有一种边框)
2. Fiddle不使用 img 标签