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;
   }

这是小提琴：

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;
 }

编辑 -

Fiddle使用img标签（图片旁边有一种边框）
Fiddle不使用img标记

完全替换处于活动状态的图像以覆盖静态图像Jquery Mobile

1 个答案: