javascript - Jquery hover out halting script -


i have script:

$(document).ready(function () {     var $navtoggle = $('.nav-toggle');     $(".navbtn").click(function () {         if ($navtoggle.hasclass('active')) {             $('#menu').multilevelpushmenu('collapse');             $navtoggle.removeclass('active');             $(this).addclass('active');         }         else {             $('#menu').multilevelpushmenu('expand');             $navtoggle.addclass('active');             $(this).removeclass('active');         }     });      $(".navbtn").hover(function () {         $('.nav-toggle').addclass('hover');     }); }); 

this works great hover incomplete because whenever add removeclass line , stops working ? so:

$(".navbtn").hover(function () {     $('.nav-toggle').addclass('hover');     $('.nav-toggle').removeclass('hover'); }); 

please can someonne trying reset hover class.

you can call .hover 2 arguments, first argument mouse enter callback, second mouse leave

$(".navbtn").hover(function () {     $('.nav-toggle').addclass('hover'); },function(){     $('.nav-toggle').removeclass('hover'); }); 

demo

$(".navbtn").hover(function () {          $('.nav-toggle').addclass('hover');      },function(){          $('.nav-toggle').removeclass('hover');      });
.nav-toggle {     background:#fff;       transition:all 1s;  }    .nav-toggle.hover {     background:#ff0;     color:black;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <div class="navbtn">my nav</div>    <div class="nav-toggle">toggle</div>

note if element want trigger css transition on has relation hovered element can use css. if instance .nav-toggle sibling or child of .navbtn can use :hover psuedo class

.navbtn:hover .nav-toggle {    background:#ff0; } 

css demo

assumes .nav-toggle sibling of .navbtn

.nav-toggle {     background:#fff;       transition:all 1s;  }    .navbtn:hover ~ .nav-toggle {     background:#ff0;     color:black;  }
<div class="navbtn">my nav</div>  <div class="nav-toggle">toggle</div>


Comments

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -