Question

我尝试在mouseenter元素Y上显示元素X并将其隐藏在mouseleave元素Y上。

到目前为止一切正常。

除此之外，我希望将元素X悬停在它之后，保持打开状态在悬停元素X之后，它应该被隐藏。

您能帮我找一下代码中的问题吗？
（我使用jquery 1.3.2）

$(document).ready(function () {
    $('.kukuk').mouseenter(showBox).mouseleave(hideBox);

    function showBox(e) {
        $('.kuk-blok').fadeIn().css(({
            left: 0,
            top: 30
        }));
    }

    function hideBox() {
        $('.kuk-blok').fadeOut();
    }

    $(".kuk-blok").hover(function () {
        $(this).css('display:block');
    }, function () {
        $(this).css('display:none');
    });
});

Answer 1

在没有看到实际HTML的情况下，脚本与最明显的问题相关，似乎是使用了css()方法。

css()方法需要2个参数来设置值：

$(".kuk-blok").hover(function () {
    //$(this).css('display:block');
    $(this).css('display', 'block');
}, function () {
    //$(this).css('display:none');
    $(this).css('display', 'none');
});

如果您愿意，也可以使用show()和hide()：

$(".kuk-blok").hover(function () {
    //$(this).css('display:block');
    $(this).show();
}, function () {
    //$(this).css('display:none');
    $(this).hide();
});

Answer 2

至于“保持开放”部分，我使用hover（）和delay（）的混合。

当鼠标离开elementX时，延迟metaY的隐藏。这提供了足够的时间在隐藏它之前将鼠标移动到elementY。当鼠标进入elementY时，其隐藏动画将被取消并保持可见状态。当鼠标离开elementY时，它会隐藏自己。

$('#elementX').hover(
  function() { $('#elementY').stop(true,true).fadeIn('fast'); },
  function() { $('#elementY').stop(true,true).delay(350).fadeOut('fast'); }
);

$('#elementY').hover(
  function() { $(this).stop(true,true).show(0); },
  function() { $(this).stop(true,true).delay(150).fadeOut('fast'); }
);

这是jFiddle。

元素应悬停时保持打开状态

2 个答案: