Question

我正在做一个关于悬停行动的小测试。考试我有两个这样的元素

<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之前停止当前动画，因此它会停止fadeOut。

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/

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

3 个答案: