Question

我有这个结构

<div class="container">
  <a> <img /> </a>
  <div id="actions"></div>
 <ul id="add-to"> </ul>
</div>

我正在使用像这样的脚本

<script>
jQuery(function() {
    jQuery("#actions, #add-to").hover(function(){
        jQuery(this).prev('a').addClass('opacity');
    }, function() {
        jQuery(this).prev('a').removeClass('opacity');
    });
});
</script>

将鼠标悬停在actions元素ID上时可以正常工作，但不能使用#add-。

你能帮我解决这个问题吗？感谢

Answer 1

prev() 仅选择前一个元素，a不会紧接在#add-to之前。在这种情况下，您可以使用 siblings() 或 prevAll() 。使用 prevAll() 时使用 first() 来获得最接近的

<script>
jQuery(function() {
    jQuery("#actions, #add-to").hover(function(){
        jQuery(this).siblings('a').addClass('opacity');
    }, function() {
        jQuery(this).siblings('a').removeClass('opacity');
    });
});
</script>

或

<script>
jQuery(function() {
    jQuery("#actions, #add-to").hover(function(){
        jQuery(this).prevAll('a').first().addClass('opacity');
    }, function() {
        jQuery(this).prevAll('a').first().removeClass('opacity');
    });
});
</script>

悬停时的Jquery addclass

1 个答案: