5

グリッド上に9つのアイテムがあり、すべてのアイテムの不透明度を0.5にします。カーソルを合わせた場合にのみ、div/itemとその中のすべての不透明度を1.0にします。

これがJSです

$('.gallery-single').css({ opacity: 0.5 });

$('.gallery-single a').mouseover(function(){
    $('.gallery-single-title', this).css('display', 'block');
        $('.gallery-single', this).css({ opacity: 1 });
});
$('.gallery-single a').mouseout(function(){
    $('.gallery-single-title', this).css('display', 'none');
        $('.gallery-single', this).css({ opacity: 0.5 });
});

HTML

<div class="gallery-single">
<a href="#" title="">
<div class="gallery-single-title hide">Some text goes here</div>
<div class="gallery-single-img"><img src="http://img.youtube.com/vi/code/0.jpg" width="300" height="200" /></div>
</a>
</div>

ロードされたとき、すべてのアイテムは不透明度0.5になりますが、フォーカスされたときに不透明度は変更されません。私はここで何が間違っているのですか？

4

2 に答える 2

6

これを試して：

$('.gallery-single a').hover(function(){
    $(this).closest('.gallery-single-title').css('display', 'block');
        $(this).closest('.gallery-single').css({ opacity: 1 });
},
function(){
    $(this).closest('.gallery-single-title').css('display', 'none');
        $(this).closest('.gallery-single').css({ opacity: 0.5 });
});

実例。

于 2011-06-08T05:19:12.727 に答える
1

問題は、それ.gallery-singleがアンカーの祖先である（つまり、アンカーの外側にある）ことです。フォーマットは、内の$(selector, this)セレクターを検索します。代わりに、：を使用してください this.closest()

$(this).closest('.gallery-single').css(...);

補足：jQueryは次のことについてこの警告を出しますmouseover（にも適用されますmouseout）：

このイベントタイプは、イベントのバブリングが原因で多くの頭痛の種を引き起こす可能性があります。たとえば、この例でマウスポインタがInner要素上を移動すると、mouseoverイベントがその要素に送信され、Outerまで細流化されます。これにより、バインドされたマウスオーバーハンドラーが不適切なタイミングでトリガーされる可能性があります。便利な代替手段については、.mouseenter（）の説明を参照してください。

代わりに（mouseenterおよび）を使用する必要があります（または2つを便利に組み合わせる関数）。mouseleavehover()

于 2011-06-08T05:22:10.090 に答える