将div包围在一个并阻止div隐藏起来

Question

我有一个显示here的情况，理想情况下我希望'＃menu'div中的所有div包围绿色div，就像这样 但我明白这很难实现，所以不要过于沉溺。但是，我希望能够将鼠标悬停在绿色div上，并且蓝色div应该出现并保持在那里以便用户能够单击它们。我该怎么做呢？

Answer 1

在这里你JSFiddle

基本上像suckerfish菜单一样，但是用绝对定位的方块。他们将保持相对于中间广场，所以你可以把它放在任何你想要的地方。内部div存在，因为LI（蓝色框）必须触摸绿色的悬停问题，因此div具有在它们之间创建空间外观的边距。

Answer 2

您可以使用延迟来执行此操作。例如绿色方块上的mouseleave。您应该延迟300毫秒并在蓝色div上寻找mouseenter。如果发生这种情况 - 打破这个/其他蓝色div的hide（）效果。

将setTimeout()函数与我上面描述的操作的标签一起使用。

Answer 3

当然，你可以出现在“周围”。你只需要决定HTML的含义。一个例子是：jsFiddle

$('.boxGroup').hover(function(){
    $(this).find('.blueBox').show();
},function(){
    $(this).find('.blueBox').hide();
});

...

<table class="boxGroup">
    <tr>
        <td class="boxColumn">
            <div class="box blueBox"></div>
        </td>
        <td class="boxColumn">
            <div class="box blueBox"></div>
            <div class="box greenBox"></div>
            <div class="box blueBox"></div>
        </td>
        <td class="boxColumn">
            <div class="box blueBox"></div>
        </td>
    </tr>
</table>

在每个人都吓坏了“omg表”之前。垂直对齐不是浏览器在没有js或表滥用的情况下处理得好的。

* ps：除非您需要此功能，否则请不要使用延迟。所有悬停菜单都以“容器”作为触发器构建。所有东西（包括隐藏的物体）都存在于容器内，然后你所要做的就是揭示和隐藏内容;蓝色的盒子就像绿色的盒子一样徘徊，所以一切都保持可见。