2

我正在尝试制作一个 div jQuery 代码以在鼠标悬停在另一个 div 上后显示一个 div！

jQuery：

$(document).ready(function() {
    $('.pic').mouseover(function() {
        $('.rank').fadeOut(200);        
        $(this).next('.rank').fadeIn(400);   
    });

    $("div.rank").hide();
});​

HTML：

<div class="pic">Mouse Over</div>
<div class="rank">Show Somthing</div>​

演示：http: //jsfiddle.net/CaMwL/

现在，问题是，我需要在这段代码中添加 mouseout 事件，当我将鼠标移出时，我想隐藏一个 div！我不知道我该怎么做！

4

5 回答 5

2

试试这个：http: //jsfiddle.net/633hD/1/

您可以链接 API：.mouseout http ://api.jquery.com/mouseout/

希望它适合原因:)

代码

$(document).ready(function() {
    $("div.rank").hide();

    $('.pic').mouseover(function() {
        $('.rank').fadeOut(200);        
        $(this).next('.rank').fadeIn(400);   
    }).mouseout(function() {
           $("div.rank").hide();
    });
});​
于 2012-10-09T04:16:03.973 回答
2

你的意思是：

$(document).ready(function() {
    $('.pic').hover(
        function() {
            $('.rank').fadeOut(200);        
            $(this).next('.rank').fadeIn(400);   
        },
        function() {
            $('.rank').fadeIn(400);        
            $(this).next('.rank').fadeOut(200);   
        });

    $("div.rank").hide();
});
于 2012-10-09T04:16:20.433 回答
1

只需添加

$(document).ready(function() {
$('.pic').mouseout(function() {
    $("div.rank").hide();
});   
});

此外，您可以将 onmouseover 和 onmouseout 属性添加到 div 元素，并使用 jquery 将值设置为 javascript 函数。

于 2012-10-09T04:15:34.333 回答
1

尝试这个

$('.pic').mouseout(function() {
    $("div.rank").hide();
});

找到 jsfiddle http://jsfiddle.net/CaMwL/5/

于 2012-10-09T04:15:58.297 回答
1 
$(document).ready(function() {
    $('.pic').mouseover(function() {
        $('.rank').fadeOut(200);        
        $(this).next('.rank').fadeIn(400);   
    });

     $('.pic').mouseout(function() {

         $("div.rank").hide();   
    });


});
于 2012-10-09T04:16:59.463 回答