jquery - 使用 jQuery 改变不透明度

Question

我在一个网格上有 9 个元素，我希望所有元素的每个元素都具有 0.5 的不透明度，并且只有当鼠标悬停在上面时，div/元素和里面的所有内容都应该具有 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，但聚焦时不透明度不会改变。 我在这里做错了什么？

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 .