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。

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

显示/隐藏div jquery

3 个答案: