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 に答える