如何检测mouseout是否为真？答案

【问题标题】：How to detect whether mouseout is true or not?如何检测mouseout是否为真？
【发布时间】：2013-08-02 11:13:18
【问题描述】：

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

我正在尝试从 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

        );
    });

【问题讨论】：

您已经使用mouseover，为什么mouseout 的工作方式会有所不同？
+ 我敢打赌你不想为此使用setInterval()。请改用setTimeout()。
@Yoshi，只是因为我想检测 mouseout 事件，使用它是另一种方式。
@Manoz 我认为这是你的一个简单的误解。由于异步性质，处理事件总是涉及回调函数。您可以隐藏它们或以其他方式抽象它们，但最终将调用一个函数来处理事件。
@Manoz 在处理mouseover 时，永远不会为同一个元素触发 mouseout 事件。鼠标刚刚进入一个元素，如何同时检测到该元素的鼠标移出？

标签： javascript jquery setinterval

【解决方案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/

【讨论】：

不使用mouseleave的其他功能可以吗？我想检测 mouseout 是否为真。
是的，你可以做到@Manoz 只需将 mouseleave 更改为 mouseout
+ stackoverflow.com/questions/4258615/…

【解决方案2】：

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

【讨论】：

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

});

【讨论】：

【解决方案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

【讨论】：