0

画像にカーソルを合わせたときに div を表示したかったのですが、フォローしているデモを見つけましたが、これはトグル ホバーです。マウスを 1 回ホバーしたときにのみ div を表示し、マウスを離すと再び非表示にしたいのですが、何が必要かわかりませんでした。コードを変更して、コードをjqueryで初めて使用したいようにします

    $(document).ready(function () {

        $(".slidingDiv").hide();
        $(".show_hide").show();

        $('.show_hide').hover(function () {
            $(".slidingDiv").slideToggle();
        });

    });

4

6 に答える 6

2

変化する：

$('.show_hide').hover(function () {
    $(".slidingDiv").slideToggle();
});

に：

$('.show_hide').hover(function () {
    $(".slidingDiv").slideDown();
}, function(){
    $(".slidingDiv").slideUp();
});
于 2012-05-14T08:17:15.300 に答える
1

$.hover 関数は、マウスを離したときに呼び出される 2 番目のコールバックを受け入れるため、要素をもう一度切り替えるだけで済みます。

$(document).ready(function () {

    $(".slidingDiv").hide();
    $(".show_hide").show();

    $('.show_hide').hover(function () {
        $(".slidingDiv").slideDown();
    }, function () {
        $(".slidingDiv").slideUp();
    }
    );

});
于 2012-05-14T08:16:09.080 に答える
0 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#slidingDiv").hide();
            $("#show_hide").show();
            $('#show_hide').hover(function () {
                $("#slidingDiv").slideDown();
            }, function () {
                $("#slidingDiv").slideUp();
            });
        });
    </script>
</head>
<body>
    <a id="show_hide">Show / Hide</a>
    <div id="slidingDiv">
        Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
        Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
        Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
        Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
        Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
        Test Test Test Test Test Test Test Test Test Test Test
    </div>
</body>
</html>
于 2012-05-14T08:16:49.030 に答える
0

これを行うには、mouseEnter と mouseLeave を使用できます。

$('#ImgToHover').mouseEnter(function(){
 // Action to perform to add hover
});

$('#ImgToHover').mouseLeave(function(){
 // Action to perform to remove hover
});
于 2012-05-14T08:17:35.583 に答える
0 
$(document).ready(function () {
    $("#div").mouseout(function(){
        $("#div").hide();
    }).mouseover(function(){
        $("#div").show();
    });
});

ここに文書化されています: http://api.jquery.com/mouseout/

于 2012-05-14T08:19:14.693 に答える
-1 
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0  /jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(


function()

{

$("#b1").click(function(){

$("p").hide();



})

$("#b2").click(function(){

$("p").show();

})

$("#fade").click(function()

{

$("p").fadeOut(2000);

})

$("#fade1").click(function()

{

$("p").fadeIn(5000);

})

});


</script>

</head>


<body>

<p>If you click on me, I will disappear.


If you click on me, I will disappear.

If you click on me, I will disappear.

If you click on me, I will disappear.

If you click on me, I will disappear.

If you click on me, I will disappear.

If you click on me, I will disappear.

If you click on me, I will disappear.

</p>

<input type="button" value="Hide" id="b1"/>

<input type="button" value="Show" id="b2"/>

<input type="button" value="Fade" id="fade"/>

<input type="button" value="Fade" id="fade1"/>

</body>



</html>


Replace Click() with hover().
于 2012-09-10T13:16:24.157 に答える