2

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

看看这个JSFiddle。

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

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

我已经尝试将带有指针的 div 放在<li>标签中，但是 jQuery 变得很棘手。

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

4

3 回答 3

3

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

这将适用于 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/

于 2012-11-26T15:24:16.363 回答
1

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

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

你可以：

  1. 将 .pointer div 替换为 .pointer 中的背景图像.menu > ul > li。

  2. 您可以将 .pointer div 移动到相应的.menu > ul > li元素中：

    $('.pointer').appendTo($(this));
于 2012-11-26T15:23:48.680 回答
0

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

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

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

于 2012-11-26T15:34:54.217 回答