show/Hide div jquery

Question

is there is any jquery function that makes trigger a function when the mouse enter the first quarter of the screen ?

what i am actually doing is show and hide a div when the mouse move over another div both are at the same position (overlap ) , it show and hide my content but the button are disabled because the show_hide div is over the menu div , i set the z-index of the show hide div to -1 and every time the mouse move over the 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 this is the jquery code :

 $(document).ready(function(){
    $("#show_hide").hover(
        function(){
            $("#menu").show() ;

        },
        function(){
            $("#menu").hide() ; 

        }
    );

Answer 1

The hover() event is really just using mouseenter() and mouseleave(). This should work:

 $(document).ready(function(){
    $("#show_hide").mouseenter(
        function(){
            $("#menu").show();
        }
    );
    $("#menu").mouseleave(
        function(){
            $(this).hide();
        }
    );
});

If you want to keep the html structured the way it is, then you will want to hide your #menu div when you leave it.

An alternative way to make it work is to contain the #menu div within the #show_hide div. If you do that instead, then your original jquery will work.

Answer 2

$(document).ready(function(){
    $("#show_hide").mouseover(function(){
        $("#menu").show() ; 
        $("#show_hide").css("display","none");
    });
  $("#menu").mouseleave(
    function(){
        $(this).hide();
        $("#show_hide").css("display","");
    });

   });

Answer 3

$("#show_hide").mouseover(function(){

    if ($("#menu").css('display') == 'none') 
    {
    $("#menu").slideDown("slow");
    }
    else 
    {
    $("#menu").slideUp("slow");
    }
});