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
Post a Comment