0

マウスが画面の最初の4分の1に入ったときにトリガーを関数にするjquery関数はありますか？

私が実際に行っているのは、マウスが別のdiv上に移動したときにdivを表示および非表示にすることです（オーバーラップ）。コンテンツを表示および非表示にしますが、show_hide divがメニューdiv上にあるため、ボタンは無効になります。 show hidden 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() ; 

        }
    );
4

3 に答える 3

0

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 が機能します。

于 2012-06-05T14:28:07.920 に答える
0 
$("#show_hide").mouseover(function(){

    if ($("#menu").css('display') == 'none') 
    {
    $("#menu").slideDown("slow");
    }
    else 
    {
    $("#menu").slideUp("slow");
    }
});
于 2013-08-25T15:44:25.927 に答える
0 
$(document).ready(function(){
    $("#show_hide").mouseover(function(){
        $("#menu").show() ; 
        $("#show_hide").css("display","none");
    });
  $("#menu").mouseleave(
    function(){
        $(this).hide();
        $("#show_hide").css("display","");
    });

   });
于 2012-06-05T15:01:57.063 に答える