Question

我有一个非常棘手的UI用例 - 我似乎无法弄清楚。

我有两个 NOT 互相嵌套的div（这很重要，因为嵌套可以很容易地解决它）。

这是divs结构：

<div class="a"></div>
<div class="b"></div>

这就是设计的样子：

-------
|     |
|  A  |
|     |
-------
B is hidden by default

-------------
|     |     |
|  A  |  B  |
|     |     |
-------------
Roll over on A shows B. Rolling over on B or A still shows B

-------
|     |
|  A  |
|     |
-------
Rolling out outside of A & B will hide B

我尝试用4个$ .on（）事件（鼠标悬停A，鼠标悬停B，鼠标输出A，鼠标输出B）。并且无法解决问题。当然，这是复杂节点结构的简化示例：A＆amp; B包含更多元素且不是兄弟姐妹。

Answer 1

这是因为mouseleave a事件在鼠标输入b之前被触发，因此鼠标永远无法输入b来保持显示。

尝试

jQuery(function ($) {
    var $target = $('.b'),
        timer;
    $('.a').hover(function () {
        clearTimeout(timer);
        $target.stop(true, true).slideDown(500);
    }, function () {
        timer = setTimeout(function () {
            $target.stop(true, true).slideUp();
        }, 200);
    });

    $target.hover(function () {
        clearTimeout(timer);
    }, function () {
        $(this).stop(true, true).slideUp();
    });
});

演示：Fiddle

如何隐藏/显示依赖于2个不同元素的元素

1 个答案: