$("#panel-click").click(function(){ if($("#panel-click>.arrow").length==0){ $("#panel-click>div").addClass("arrow"); $("#panel-click").addClass("rotate"); $('#panel').toggleClass('toggled'); }else{ $("#panel-click>div").removeClass("arrow"); $("#panel-click").removeClass("rotate"); $('#panel').removeClass('toggled'); } }); $("#panel").hover(function(){ if($("#panel-click>.arrow").length==0){ $("#panel-click>div").addClass("arrow"); $("#panel-click").addClass("rotate"); }else{ $("#panel-click>div").removeClass("arrow"); $("#panel-click").removeClass("rotate"); } });

panel-click is an animated menu icon (hamburger). When you click on the #panel-click icon, it is animated (animated in the arrow) and the #panel block opens. When you click on the #panel-click icon again, it returns to its original position and the #panel block closes. Help, please, make the #panel block close not only when you click on the #panel-click icon, but also when you hover over the #panel block, while the #panel-click icon returns to its original position. Thank!

  • all code from html here. - Jean-Claude

2 answers 2

 $(document).ready(function(){ $("#hide").hover(function(){ $(".div").hide(); }); }); 
 .div{ width:300px; height:300px; border:1px solid #999; margin:10px auto; position:relative; } #hide{ position:absolute; right:0; top:0; width:20px; text-align:center; height:20px; line-height:20px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <div class="div"> <div id="hide"> X </div> </div>

here so - the easiest way, an example on fidle

    If I understand the question correctly, then you need something like this:

     // событие только по наведению $("#panel").mouseout(function(){ // только если у панели есть класс 'toggled' if ($(this).hasClass('toggled')) { $("#panel-click>div").removeClass("arrow"); $("#panel-click").removeClass("rotate"); $('#panel').removeClass('toggled'); } });
    • In this case, when the panel is open, when you hover on it, the icon returns to its original position, and when you remove the mouse from the panel, the icon is animated in the arrow. I'm trying to do on this site news.viratu.com/Respublika_Krym/news - LADYX
    • Then not on a mouseover , but on a mouseout , an example corrected - Anton Shevchuk
    • For some reason, in this case there are no changes. - LADYX
    • Strange, let's take an example on jsfiddle - Anton Shevchuk