Question

当我悬停在一张图片上时，我想要显示一个div我发现了一个我关注的演示，但它是一个切换悬停我只想在鼠标悬停在它上面时显示div并在鼠标离开时再次隐藏我不知道我需要在代码中更改工作，就像我想要我在jquery这里的新代码

    $(document).ready(function () {

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

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

    });

Answer 1

变化：

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

为：

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

Answer 2

$ .hover函数接受第二次回调，在鼠标离开时调用，所以你只需要再次切换元素：

$(document).ready(function () {

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

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

});

Answer 3

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

Answer 4

您可以使用mouseEnter和mouseLeave来执行此操作

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

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

Answer 5

$(document).ready(function () {
    $("#div").mouseout(function(){
        $("#div").hide();
    }).mouseover(function(){
        $("#div").show();
    });
});

此处记录：http://api.jquery.com/mouseout/

Answer 6

<!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().

Jquery在悬停时显示和隐藏

6 个答案: