在 jQuery 代码中添加 MouseOut答案

【问题标题】：Add MouseOut in jQuery Code在 jQuery 代码中添加 MouseOut
【发布时间】：2012-09-29 08:26:28
【问题描述】：

我正在尝试制作一个 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！我不知道我该怎么做！

【问题讨论】：

仅供参考，.hover 使两者更容易绑定。 $('...').hover(function(){ /* mouse over */ },function(){ /* mouse out */ });

标签： jquery mouseover mouseout

【解决方案1】：

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

您可以链接 API：.mouseouthttp://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();
    });
});

【讨论】：

我无法检查并接受所有答案，但感谢您帮助我。
@Alireza 没问题，:))很高兴它帮助了你！

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

【讨论】：

【解决方案3】：

试试这个

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

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

【讨论】：

我无法检查并接受所有答案，但感谢您帮助我。

【解决方案4】：

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

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

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


});

【讨论】：

我无法检查并接受所有答案，但感谢您帮助我。

【解决方案5】：

只需添加

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

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

【讨论】：

我无法检查并接受所有答案，但感谢您帮助我。