javascript - Jquery Hover - allow hover on another DIV the appears on hover of a button -
i have homepage 4 buttons. when hovered on button, menu appears behind buttons. when hover on button, different colored menu appears in it's place.
currently, can buttons show menus, when hover onto menus (and hover off button) lose menu.
here's simple code: jquery @ top:
$(".mybutton").hover( function () { $(".mybox").fadein(); }, function () { $(".mybox").fadeout(); } ); $(".mybutton2").hover( function () { $(".mybox2").fadein(); }, function () { $(".mybox2").fadeout(); } ); and html:
<div class="mybox"> <div style="position: absolute;"> <a href="#">item 1</a> <a href="#">item 2</a> </div> </div> <div class="buttons"> <div class="mybutton"> /* button image here */ </div> <div class="mybutton2"> /* button 2 image here */ </div> </div> so need way keep box fades in active when hovered over. thinking of not doing callback fadeout, , somehow doing fadeout if fade off .mybox div or if hover on button. it's little unclear me how accomplish that.
thanks in advance.
you need include menu , button inside container , have hover event on container. way menu visible long you're hovering on container.
here's need do. declare container menu , button both inside it.
<div id='container'> <div class="mybox box"> <div style="position: absolute;"> <a href="#">item 1</a> <a href="#">item 2</a> </div> </div> <div class="buttons"> <div class="mybutton"> /* button image here */ </div> </div> </div> here's need in jquery.
$(document).ready(function() { $("#container").hover( function() { console.log($(".mybox").fadein()); $(".mybox").fadein(); }, function() { $(".mybox").fadeout(); } ); }); here's working jsfiddle 2 buttons
Comments
Post a Comment