悬停在一个元素上并显示另一个元素

Question

我正在做一个关于悬停动作的小测试。 对于考试，我有 2 个这样的元素

<body>
<input type ='button' value ='hover this' class='hover_button'>
<div class='hover_div' style='display :none' >Some text here</div>
</body>

（由于某种原因，我不能让 div 作为按钮的子元素或其他东西关闭，按钮只是一个测试，我们可以在这里有很多改变元素）

是的，当我们将鼠标悬停在按钮上时，会显示 div，但是我希望当我们在按钮上模糊，并专注于 div 时，只要我们在这个 div 上模糊，div 仍然会显示。 我试过这段代码： 但它不能正常工作：

$(button).hover(function(e)
    {

         e.preventDefault();
         //alert('a');
         var top = parseInt($(button).css('top'));
         var left = parseInt($(button).css('left'));

         $(div).css({top : top, left : left}).show();
         //e.stopPropagation();

    },function(e)
    {
        $(div).fadeOut(600);
    })

    $(div).hover(function(e)
    {
        //e.stopPropagation();
        $(this).show();
    },function(e)
    {
        $(this).hide();
    })

谢谢

Answer 1

您可以使用jQuery 的.stop() 方法来停止当前动画。然后，当您将鼠标悬停在 div 上时，您可以显示 div（因此它不会褪色）。

例如：JSFiddle

var button = $('.hover_button');
var div = $('.hover_div');

$(button).hover(function(e) {    
    var top = parseInt($(button).css('top'));
    var left = parseInt($(button).css('left'));

    $(div).css({top : top, left : left}).show();
},function(e) {
    $(div).fadeOut(600);
});

$(div).hover(function(e) {
    $(this).stop().show();
},function(e) {
    $(this).hide();
});

请注意，我们现在使用$(this).stop().show();，以便在显示 div 之前停止当前动画，从而停止淡出。

Answer 2

喜欢

jQuery(document).ready(function ($) {
    $('.hover_button').hover(function () {
        var $target = $('div');
        clearTimeout($target.data('hoverTimer'));
        var top = parseInt($(this).css('top'));
        var left = parseInt($(this).css('left'));

        $('div').css({
            top: top,
            left: left
        }).show();
    }, function () {
        var $target = $('div');
        var timer = setTimeout(function () {
            $target.hide();
        }, 200);
        $target.data('hoverTimer', timer);
    });

    $('div').hover(function () {
        clearTimeout($(this).data('hoverTimer'));
    }, function () {
        $(this).hide();
    });
});

演示：Fiddle

Answer 3

您的代码是正确的，但您的按钮选择器是错误的 :) 使用

$('input[type=button]')

而不是

 $('button')

演示小提琴：http://jsfiddle.net/6AGGr/