顯示/隱藏div jquery

Question

是否有任何jQuery的功能，使鼠標進入屏幕的第一個四分之一時觸發一個功能？

我實際上做的是顯示並隱藏div，當鼠標移動到另一個div上時，它們都處於相同位置（重疊），它顯示並隱藏我的內容，但該按鈕被禁用，因爲show_hide div已關閉菜單DIV，我設置顯示隱藏div的Z-指數爲-1，每次在菜單DIV鼠標移動不斷閃爍

<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> 

，這是jQuery代碼：

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

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

     } 
    ); 

Answer 1

hover（）事件實際上只是使用mouseenter（）和mouseleave（）。這應該工作：

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

如果你想保留的HTML結構的事情是這樣的，那麼你將要當你離開它來隱藏自己的#menu股利。

使其工作的另一種方法是在#show_hide div中包含#menu div。如果你這樣做，那麼你的原始jQuery將工作。

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"); 
    } 
});