鼠標懸停時顯示B，鼠標懸停C時隱藏B？

Question

的CSS：

<div class="aaa">aaa</div> 
<div class="bbb">bbb</div> 
<div class="ccc">ccc</div> 


<hr> 

<div class="aaa">aaa</div> 
<div class="bbb">bbb</div> 
<div class="ccc">ccc</div> 


<hr> 

<div class="aaa">aaa</div> 
<div class="bbb">bbb</div> 
<div class="ccc">ccc</div> 

我一直在試圖找出我怎麼能做到這一點。我試過以下，但由於它是由CCC去除皮類，而不是BBB

$(document).ready(function(){ 
    $(".aaa").on({ 
     mouseover: function(){ 
      $(this).nextAll('.bbb:first').addClass('hide'); 
     }, 
     mouseout: function(){ 
      $(this).nextAll('.ccc:first').removeClass('hide');  
     } 
    }); 
}); 

MY JS FIDDLE

Answer 1

那麼它是沒有意義的，你告訴它從ccc刪除隱藏類當你寫$(this).nextAll('.ccc:first') 。

你可能想是這樣的：

$(".aaa").on({ 
    mouseover: function(){ 
     $(this).nextAll('.bbb:first').addClass('hide'); 
    } 
}); 

$(".ccc").on({ 
    mouseover: function(){ 
     $(this).prevAll('.bbb:first').removeClass('hide');  
    } 
});