0

写真に関する情報を表示するレイヤーをサムネイルに作成しようとしています。

ホバー効果を作成するために jQuery を使用しています。

しかし、ホバーの問題に直面しました。ここでコードとプレビューを確認できます。

My JS Code :
$('img').hover(function(){

        $(this).next('.mask').fadeIn();


    },function(){

        $(this).next('.mask').fadeOut();

    });

完全な CSS/HTML/JS コード:

jsFiddle どうすればこの問題を解決し、jqueryホバーを正常にできますか?

4

2 に答える 2

1

私はミニゴッドに同意します。これには必ずしも jQuery を使用する必要はありませんが、使用できます。速度と使いやすさから、CSS3 メソッドを使用することを好みます。オーバーレイ クラスを作成し、transition プロパティを追加しました。これは非常に便利です。

.textoverlay h4 { 
         color: #fff; 
         display: inline; 
         font-family: 'Any Font here'; 
         font-size: 12px;  
         letter-spacing: 1.5px; 
         line-height: 14px; 
         margin-left: 8px; 
         margin-top: 51px;
         position: absolute; 
         visibility: visible; 
         z-index: 10; 
}

.textoverlay img { 
         margin-right: 22px;
        -moz-transition: opacity 0.3s ease-in-out; 
        -webkit-transition: opacity 0.3s ease-in-out; 
         transition: opacity 0.3s ease-in-out; 
}

私の h4 ポジショニングは私のサムネイル サイズに非常に固有のものであり、これをいじる必要があるかもしれないことに注意してください。また、これは IE 10+ でのみサポートされているため、対象者によって異なります。

Mozilla Developer Networkには、ベスト プラクティスと説明、および役立つ JS.vHope に関する優れた CSS ドキュメントがあることがわかりました。

于 2013-07-24T02:10:32.790 に答える
1

.mask上に示したために得られる効果img。ホバー イベントが onであるため、上imgに置くとイベント.maskが発生し、再びmouseleaveフェードアウト.maskします。が.maskフェードアウトすると、マウスが の上に移動しimg、.maskフェードインしてすべてが繰り返されます。

これには 100% CSS を使用することをお勧めします。JSは必要ありません。

于 2013-07-24T01:42:06.160 に答える