我想在鼠标悬停在超时时显示 div 并在鼠标上隐藏它

Question

我想在鼠标悬停在超时时显示div，并在鼠标输出时将其隐藏

我喜欢这个，但它无法正常工作

$(".ad-item").hover(
    function () {
        var $this = $(this);
        var timer =
            setTimeout(function () {
                $this.children('.content').show();
            }, 500);
    },
    function () {
        clearTimeout(timer);
        $(this).children('.content').hide();
    }
);

Answer 1

我认为你需要这个。在此处检查工作代码。http://jsfiddle.net/linkmanishgupta/cKRDH/

这是脚本：-

 var timer;
 $(document).ready(function () {
     $("div").hover(
     function () {
         timer = setTimeout(function () {
             $("div").children().hide();
         }, 500);
     }, function () {
         clearTimeout(timer);
         $("div").children().show();
     });
 });

希望这有帮助。

Answer 2

你正在 mouseout fn 不起作用，因为它无法访问timer ，因为该 var 是在另一个函数中初始化的。试试这个：

var timer;    
$(".ad-item").hover(
    function () {
        var $this = $(this);
        timer =
            setTimeout(function () {
                $this.children('.content').show();
            }, 500);
    },
    function () {
        clearTimeout(timer);
        $(this).children('.content').hide();
    }
);

Answer 3

试试这个。

$(document).ready(function () {
    $(".ad-item").mouseover(function (e) {
        e.stopPropagation();
         $this.children('.content').show();
    });
    $(".ad-item").mouseout(function (e) {
        e.stopPropagation();
         $(this).children('.content').hide();
    })
});

Answer 4

如果要使用超时，则计时器变量必须是全局变量：

$(document).ready(function(){
var timer
    $(".aditem").hover(
        function () {
            var $this = $(this);
            timer =
                setTimeout(function () {
                    $this.children('.content').fadeIn();
                }, 500);
        },
        function () {
            clearTimeout(timer);
            $(this).children('.content').hide();
        }
    );
});

但是在您的情况下，如果您使用一些 Jquery 效果（例如带有慢速动画的 fadeIn），您也可以避免使用计时器：

$(document).ready(function(){
    $(".aditem").hover(
        function () {
            var $this = $(this);
            $this.children('.content').fadeIn(1500);
        },
        function () {
            $(this).children('.content').hide();
        }
    );
});

工作小提琴