Question

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

我正在尝试从div部分检测mouseout事件。当我在此图像上鼠标悬停时，它显示标题;说“改变形象”。 5秒后，标题变为fadeOut。

我正在使用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

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

Answer 3

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);
    });

});

Answer 4

试试这个：

(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 DEMO

如何检测mouseout是否为真？

4 个答案: