0

jQuery ホバー機能を使用して、クラスの不透明度を変更しています。注：私は使用していません

<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">
</script>

これが私のコードです：

<script type="text/javascript">
    $(document).ready(function(){
        $(".thumbnail_image_related_project .transparent_font").css({'opacity' : '0'});
        $(".thumbnail_image_related_project").hover(
            function(){
                $(this).children(".transparent_font").stop().animate({'opacity' : '0.7'}, 300); 
             },
            function(){
                $(this).children(".transparent_font").stop().animate({'opacity' : '0'}, 300); 
           }
        );
    });
</script>

このコードはラップトップでは完全に機能しますが、スマートフォンでは機能しません。問題: 要素をクリックすると、アニメーションが機能し、次のページに移動します。しかし、前のページに戻ると、要素の不透明度が初期化されていません。誰かが理由を知っていますか？

これが私のphpコードです：

<a href="http://192.168.0.11/next-page/" title="blabla">
   <div class="thumbnail_image_related_project">
      <h2 class="transparent_font">Text and the white background</h2>
      <div id="image">
         <img width="300" height="173" src="http://192.168.0.11/blabla.jpg"/>
      </div>
   </div>
</a>

ここに私のCSSがあります:

    .thumbnail_image_related_project .transparent_font{
    line-height: 1.25em;
    position: absolute;
    top: 0;
    left: 0;
    color: black;
    background-color:white;
    width: 100%;
    height: 100%;
    opacity:0;
}
4

1 に答える 1

0

jQuery または jQuery Mobile を使用していますか? 私が尋ねる理由は、モバイルではタッチスタート イベントがホバーしない可能性が高いからです。jQuery Mobile は touchstart を hover に変換する場合があります。

これを見てください: jQuery hover event on tag on mobile devices。

于 2013-02-13T17:44:19.513 に答える