如何检测mouseout是否为true

How to detect whether mouseout is true or not?

本文关键字:mouseout 是否 true 检测 何检测      更新时间:2023-09-26

我有一个简单的fiddle作为工作示例-

Jsfidle

我正在尝试从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
        );
    });
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/

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

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

试试这个:

(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演示