如果下一個元素可見，則刪除懸停效果

Question

我創建了一個簡單的框，單擊該框可以打開/關閉以顯示內容。 我也想在h2元素上使用鼠標懸停。 這是可行的，但是當盒子打開時，應該沒有懸停效果。

可以使用CSS完成此操作，還是必須使用JS？

  $('.box > h2').on('click', function() { $(this).next('div').slideToggle(); }); 

 .box h2 { padding: .5em; } .box h2:hover { background-color: #ccc; } .box > div { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box"> <h2>Title</h2> <div>Any content</div> </div> 

Answer 1

僅使用CSS無法做到這一點，但是您可以使用toggleClass() jQuery方法在jQuery代碼中添加一些改動來實現此目的：

只需在<h2>具有.closed類時在CSS中添加懸停效果，然后每次執行slideToggle()時，就從clicked元素中刪除/添加.closed類。 您可以在此處看到修改后的代碼：

 $('.box > h2').on('click', function() { $(this).next('div').slideToggle(); $(this).toggleClass('closed'); }); 

 .box h2 { padding: .5em; } .box h2.closed:hover { background-color: #ccc; } .box > div { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box"> <h2 class="closed">Title</h2> <div>Any content</div> </div> 

Answer 2

jQuery有一個:visible選擇器。 您可以切換hover類。

  $('.box > h2').on('click', function() { $(this).removeClass('hover').next('div').slideToggle(); }).hover(function() { if (!$(this).siblings('div').is(':visible')) { $(this).addClass('hover'); } }, function() { $(this).removeClass('hover'); }); 

 .box h2 { padding: .5em; } .box h2.hover { background-color: #ccc; } .box > div { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box"> <h2>Title</h2> <div>Any content</div> </div>