0

我想在将鼠标悬停在图像上时显示一个 div 我找到了一个我关注的演示，但它是一个切换悬停我只想在鼠标悬停一次时显示 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 函数接受第二个回调，在鼠标离开时调用，所以你只需要再次切换元素：

$(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 回答