0

最近、Web サイト ( http://www.howrad.me ) を公開しましたが、Safari でのホバリング以外はすべて正常に動作します。オーバーレイpgaTitleが画像と一致しませんpgaPhoto

図面セクションのコード例を次に示します ( http://howrad.me/tattoos.html#drawings )

        <a class="fancybox" data-fancybox-group="thumb2" title="2012 baybay" href="images/2012/1.jpg">
        <div class="pgaPhoto">
        <div class="pgaTitle" style="display: none;">
        <h2>2012</h2>
        </div>  
        <img src="images/covers/drawing2012.jpg" />
        </div></a>


        <a class="fancybox" data-fancybox-group="thumb3" title="figure study"href="images/2009/drawings/1.jpg">
         <div class="pgaPhoto">
         <div class="pgaTitle" style="display: none;">
        <h2>2010</h2>
        </div>  
        <img src="images/covers/drawing2010.jpg" />
        </div></a>

HTML構文は私には問題ないようで、以下のjqueryはうまく機能しています:

        $(document).ready(function() {
            $(".pgaPhoto").hover(function() {
                $(this).find(".pgaTitle").stop().fadeTo(300, 1 , function() {
                });
            } , function() { //on hover out...
                $(this).find(".pgaTitle").fadeTo(300, 0);
            });
        });

特に他のブラウザで実際の問題がない場合、左側の画像のホバー状態がわずかにずれている理由がわかりません。何か助けて?? よろしくお願いします!

4

1 に答える 1