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（hovered元素）的父级的兄弟。

因此，您必须转到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');

使用$ .parent（）更改不透明度css属性

4 个答案: