javascript - 如何检测mouseout是否为真？

Question

我有这个简单的小提琴作为一个工作示例-

提琴手

我正在尝试从某个div部分检测 mouseout 事件。当我将鼠标悬停在此图像上时，它会显示标题；说“改变形象”。5 秒后字幕淡出。

我setInterval用来相应地设置它。现在，如果我对此图像进行鼠标移出，则只需要调用 Interval 函数。

如何在 jQuery 中检测 mouseout 事件？

试过-

$(function () {
        $('.image-profile').mouseover(function () {
            $('.change-image').stop().show();

            if ($('.image-profile').mouseout()== true) {
                TimeOut();
            }
        });

        setInterval(function TimeOut() {
            $('.change-image').fadeOut()
        }, 5000

        );
    });

Answer 1

var ImageProfileTimer;

$('.image-profile').on('mouseenter',function(){
    clearTimeout(ImageProfileTimer);
    $('.change-image').stop().show();
}).on('mouseleave',function(){
    ImageProfileTimer = setTimeout(function(){
         $('.change-image').fadeOut()
    }, 5000);
});

使用 setTimeout 和 clearTimeout

演示：http: //jsfiddle.net/xMNTB/9/

Answer 2

尝试这个：

(function () {
    $('.image-profile').mouseover(function () {
        $('.change-image').stop().show();

        if ($('.image-profile').mouseout() == true) {
            TimeOut();
        }
    }).mouseout(function () {
        setInterval(function TimeOut() {
            $('.change-image').fadeOut()
       }, 5000);
    });
});  

JSFIDDLE 演示

Answer 3

$('.image-profile').on('mouseleave', function() {
    setTimeout(function() {
        $('.change-image').fadeOut()
    }, 5000);
});

Answer 4

http://jsfiddle.net/xMNTB/7/

现在 div 出现在鼠标进入并在鼠标离开 5 秒后消失。

$(function () {

    $('.image-profile').mouseenter(function () {
        $('.change-image').stop().show();
    });

    $('.image-profile').mouseleave(function () {
        setTimeout(function TimeOut() {
            $('.change-image').fadeOut()
        }, 5000);
    });

});