jquery - Remove hover effect, if next element is visible -

i created simple box, should open/close while clicking on show content. want user hover on h2-element. working, there shouldn't hover effect, when box open.

can done css or have use 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>

there no way css, can add little bit change jquery code achieve using toggleclass() jquery method:

just add hover effect in css when <h2> have .closed class , , every time slidetoggle() remove/add .closed class clicked element. can see code modified here:

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