0

我尝试在元素 Y 上显示元素 Xmouseenter并将其隐藏在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');
    });
});
4

2 回答 2

2

在没有看到实际 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();
});
于 2013-02-04T23:38:34.557 回答
0

至于“保持开放”部分，我混合使用了 hover() 和 delay()。

当鼠标离开 elementX 时，延迟 elementY 的隐藏。这提供了足够的时间在隐藏之前将鼠标移动到 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。

于 2013-02-04T23:52:43.213 回答