Question

问题不是很清楚，因为我不知道如何正确地问它。

看看这个JSFiddle。

当您将鼠标悬停在“关于我们”上时，会显示一个带有绿色指针的下拉菜单。当鼠标移过指针时，菜单会崩溃。

我想知道，是否可以防止指针折叠菜单。

我尝试将带有指针的div放在<li>标记中，但随后jQuery变得棘手。

还有什么我可以尝试的吗？

Answer 1

我会使用指针的边框来解决它，并将其放置在悬停元素的伪类中。

这适用于IE7及以上版本。

.menu > ul > li:hover > a:before {
    content: '';
    display:block;
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    bottom: -7px;
    left: 10px;
    margin-left: -5px;
    border-top-color: #445921;
    border-width: 7px 7px 0px 7px;
    z-index:9;
}

小提琴： http://jsfiddle.net/mx877/

Answer 2

您的指针不在您尝试使用悬停功能选择的.menu > ul > li元素中：

    $(document).ready(function(e) {
    $('.menu > ul > li').hover(function(e) {

你可以：

将.pointer div替换为.menu > ul > li。
您可以将.pointer div移动到相应的.menu > ul > li元素中：
```
$('.pointer').appendTo($(this));
```

Answer 3

这种情况正在发生，因为当你悬停旋转的小方块时，光标实际上会从菜单中失去焦点。展开顶层元素上的填充以包含正方形，它可以正常工作。

        <li style="padding-bottom:10px;"><a href="index.html">ABOUT US</a>
            <ul>

http://jsfiddle.net/calder12/Vyd3a/3/

将鼠标悬停在元素上时防止崩溃

3 个答案: