javascript - show/Hide div jquery -
is there jquery function makes trigger function when mouse enter first quarter of screen ?
what doing show , hide div when mouse move on div both @ same position (overlap ) , show , hide content button disabled because show_hide div on menu div , set z-index of show hide div -1 , every time mouse move on menu div keeps blinking
<div id="menu" style ="width : 100% ; height:50px ;text-align : center ; background: rgba(51, 102, 255, 0.2); position : absolute ; top:0 ; display : none" > <div id="pre" style ="height:100% ; width: 50px ; float :left ; left:0 "><a href="facebook.com"><img src="external_files/images/left.png" style="margin-top:25%" /></a></div> <div id="menucontent" style="width:90% ; height:50px ; position:absolute; margin-left :60px ; border : 2px solid red; overflow-x: scroll; " ><a href="facebook.com">mina</a> </div> <div id="next" style ="height:100% ; width: 50px ; float :right ; right:0 ; text-align : center "><a href="#"><img src="external_files/images/right.png" /></a></div> </div> <div id="show_hide" style ="width : 100% ; height:70px ; position : absolute ; top:0" ></div> and jquery code :
$(document).ready(function(){ $("#show_hide").hover( function(){ $("#menu").show() ; }, function(){ $("#menu").hide() ; } );
the hover() event using mouseenter() , mouseleave(). should work:
$(document).ready(function(){ $("#show_hide").mouseenter( function(){ $("#menu").show(); } ); $("#menu").mouseleave( function(){ $(this).hide(); } ); }); if want keep html structured way is, want hide #menu div when leave it.
an alternative way make work contain #menu div within #show_hide div. if instead, original jquery work.
Comments
Post a Comment