Jquery在悬停时显示和隐藏答案

【问题标题】：Jquery Show and Hide on hoverJquery在悬停时显示和隐藏
【发布时间】：2012-09-10 21:16:24
【问题描述】：

我想在将鼠标悬停在图像上时显示一个 div 我找到了一个我关注的演示，但它是一个切换悬停我只想在鼠标悬停在其上一次时显示 div 并在鼠标离开时再次隐藏我不知道我需要更改代码才能像我想要的那样工作

    $(document).ready(function () {

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

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

    });

【问题讨论】：

标签： jquery

【解决方案1】：

变化：

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

到：

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

【讨论】：

【解决方案2】：

$.hover 函数接受第二个回调，即在鼠标离开时调用，因此您只需再次切换元素：

$(document).ready(function () {

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

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

});

【讨论】：

使用slideToggle 两次是不可靠的，可能会导致一些不希望的结果
不错的小费，10 倍。改为 sludeDown/sludeUp
不错的小费是什么意思，更像是我的不错回答。请参阅下面我未经编辑的答案。

【解决方案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>

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案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().

【讨论】：