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