javascript - 显示/隐藏 div jquery

Question

当鼠标进入屏幕的第一季度时，是否有任何 jquery 函数可以触发函数？

我实际上在做的是当鼠标移到另一个 div 上时显示和隐藏一个 div 两者都在同一位置（重叠），它显示和隐藏我的内容但按钮被禁用，因为 show_hide div 在菜单 div 上，我将 show hide div 的 z-index 设置为 -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 div。

使其工作的另一种方法是将#menu div 包含在#show_hide 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");
    }
});