Question

我在网格上有9个项目，我希望所有项目在每个项目上都有0.5个不透明度，只有在盘旋时，div / item和内部的所有内容都有1.0 opacicty。

这是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，但聚焦时不会更改不透明度。我在这里做错了什么？

Answer 1

试试这个：

$('.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 });
});

Working example

Answer 2

问题是.gallery-single是锚的祖先（即它在锚之外）。 $(selector, this)格式会在 this中查找选择器。相反，请使用.closest()：

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

Sidenote ：jQuery发出关于mouseover的警告（也适用于mouseout）：

此事件类型可能会导致很多因事件冒泡而头疼。对于例如，当鼠标指针移动时在这个内部元素例如，鼠标悬停事件将是发送到那，然后涓涓细流外。这可以触发我们的约束 inopportune的mouseover处理程序倍。请参阅讨论 .mouseenter（）有用替代品。

您应该使用mouseenter（和mouseleave）代替（或hover()功能，方便地将两者结合起来。）

用jQuery改变不透明度

2 个答案: