2

我正在尝试将处于活动状态的图像替换为基本上是 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/

4

1 回答 1

1

好吧使用纯CSS，我能想到这个

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. 使用 img 标签小提琴（图像周围有一种边框）
  2. 不使用 img 标签的小提琴
于 2013-07-31T05:30:14.333 回答