0

これが私のセットアップです

HTML:

<a href="#">
    <div class="video-play-button"></div>
</a>
<img class="video-image" src="URL" alt="" />
<div class="video-underlay"></div>

「ビデオ再生ボタン」は、画像の 100% x 100% である「ビデオ画像」のオーバーレイであり、私がしようとしているのは、「ビデオ再生ボタン」をホバーすると変化することです「ビデオアンダーレイ」を表示する「ビデオ画像」の不透明度

jQuery:

jQuery(".video-play-button").hover(
    function () {
        jQuery(".video-image").stop().animate({opacity: '0.7'}, 300);},
    function () {
        jQuery(".video-image").stop().animate({opacity: '1'}, 400);
});

これは機能しますが、同じコードとクラスを持つ複数の要素があるため、それぞれではなくすべてに影響します。

私はjsとjqueryが初めてなので、お詫びします

4

2 に答える 2

2

現在のブロックに制限できますhover。まず、closest() を使用して親aアンカー タグを見つけてから、class を使用して anhor の兄弟に移動します。video-image

jQuery(".video-play-button").hover(
    function () {
        jQuery(this).closest('a').next(".video-image").stop().animate({opacity: '0.7'}, 300);},
    function () {
        jQuery(this).closest('a').next(".video-image").stop().animate({opacity: '1'}, 400);
});
于 2013-07-16T15:55:21.397 に答える