懸停時的jQuery addclass

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-to無關。

你能幫我嗎？ 謝謝

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>