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

你的鼠标输入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

如果你想使用超时，那么timer变量必须是全局的：

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

Working Fiddle

我希望在鼠标悬停在鼠标上时显示div并将其隐藏在鼠标外面

4 个答案: