Удалить эффект зависания, если следующий элемент виден

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, но вы можете добавить только небольшое изменение битную кода JQuery, чтобы достичь этого, используя метод toggleClass() JQuery:

Просто добавьте эффект зависания в CSS, когда <h2> имеют класс .closed, а затем каждый раз, когда вы делаете slideToggle(), вы удаляете/добавляете класс из элемента clicked. Вы можете увидеть код изменен здесь:

$('.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>