使用$parent()更改不透明css属性

Question

我想更改一个元素的css属性，比如：

a.archive_blocks_fa的标准不透明度为0.5。当a.archive_blocks_sa悬停时，a.archive_blocks_fa必须具有不透明度1.0。悬停事件结束后，a.archive_blocks_fa必须返回到不透明度0.5。

HTML:

<div class="archive_blocks">
 <a href="#" class="archive_blocks_fa">
   <img width="142" height="142" src="#">
 </a>
 <div class="archive_blocks_name">
   <a href="#" class="archive_blocks_sa">Text</a>
 </div>
</div>

我写了这个jQuery代码：

$('a.archive_blocks_sa').hover(function(){
    $(this).parent('.archive_blocks_fa').css('opacity','1');
}, function(){
    $(this).parent('.archive_blocks_fa').css('opacity','0.5');
});

伙计们，我做错了什么？

Answer 1

archive_blocks_fa是archive_blocks_sa（悬停元素）的父级的同级。

因此，您必须转到其parent级别，然后使用prev()方法获取上一个同级（archive_blocks_fa）并设置其不透明度。试试这个。

$('a.archive_blocks_sa').hover(function(){
    $(this).parent().prev('.archive_blocks_fa').css('opacity','1');
}, function(){
    $(this).parent().prev('.archive_blocks_fa').css('opacity','0.5');
});

.prev()获取匹配元素集中每个元素的紧挨在前的同级元素，可选地由选择器进行过滤。

Answer 2

这里的问题是您没有正确地遍历DOM，请尝试以下操作：

$('a.archive_blocks_sa').hover(function(){
    $(this).closest(".archive_blocks").find('.archive_blocks_fa').css('opacity','1');
}, function(){
    $(this).closest(".archive_blocks").find('.archive_blocks_fa').css('opacity','0.5');
});

Answer 3

您做错的是，类archive_blocks_sa的元素没有类.archive_blocks_fa的父元素。

Answer 4

我认为parent()只会选择archive_blocks_namediv，因为它是父级，而archive_blocks_fa不是。尝试：

$(this).parent().siblings('.archive_blocks_fa').css('opacity', '1');