使用$ .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_name div，因为它是父级，而archive_blocks_fa不是。 尝试：

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