javascript - 当用户将鼠标悬停在 Chrome 或 Firefox 中的链接上时，悬停状态未被激活

Question

我们创建了这个页面:http://www.sandiego.edu/mysandiego/usd_portal/

在该页面上，有一个导航栏。

<nav class="alignLeft">
                    <ul>
                        <li class="active">
                            <a href="#">Torero Hub</a>
                            <ul>
                                <li class="active">
                                    <a href="#">Welcome</a>
                                </li>
                                <li>
                                    <a href="#">My Academics</a>
                                </li>
                                <li>
                                    <a href="#">My Financial Aid</a>
                                </li>
                                <li>
                                    <a href="#">My Student Account</a>
                                </li>
                                <li>
                                    <a href="#">My Torero Services</a>
                                </li>
                                <li>
                                    <a href="#">My Gadgets</a>
                                </li>
                                <li>
                                    <a href="#">Library</a>
                                </li>
                                <li>
                                    <a href="#">Law Library</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">Torero Life</a>
                            <ul>
                                <li>
                                    <a href="#">Student Affairs</a>
                                </li>
                                <li>
                                    <a href="#">Clubs and Activities</a>
                                </li>
                                <li>
                                    <a href="#">Graduate Life</a>
                                </li>
                                <li>
                                    <a href="#">Alumni</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </nav>

CSS 应该像这样开始:

.navBar nav li ul {
    display: none;
    background-color: #FFF;
    border-radius: 0px 0px 6px 6px;
    box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.25);
    left: 0px;
    padding: 10px 0px;
    position: absolute;
    top: 60px;
    width: 300px;
}

如果将鼠标悬停在选项卡上，它应该会弹出一个二级导航菜单。它通过检测悬停状态并将 display: none 更改为 display: block 来实现。

.no-touch .navBar nav li:hover ul, .no-js .navBar nav li:hover ul, .navBar nav li ul.active {
    display: block;
}

这适用于我测试过的所有浏览器和操作系统，但有一个用户无法让它在 Chrome 和 Firefox 中运行，我真的不知道为什么。它适用于 Internet Explorer 中的他。

当用户将鼠标悬停在 Chrome 或 Firefox 中的选项卡上时，没有任何反应。用户只能通过单击选项卡来显示弹出窗口，而不能仅通过悬停来显示。

用户使用的是 Windows 7 64 位 SP1 和 Chrome 版本 40.0.2214.85 beta-m(64 位)。

我要求其他 Windows 7 用户使用 Chrome 和 Firefox 进行测试，这对他们有效。我们缺少什么？即使我们在元素检查器中右键单击导航栏元素并将状态强制为 :hover 状态，该用户也看不到悬停 CSS。给了什么？

编辑:我发现另一个用户有同样的问题，所以它看起来并不孤立于用户的工作站。两位用户都是 Windows 7 用户，他们都可以在 Internet Explorer 中正常看到菜单，但在 Chrome 或 Firefox 中看不到。

编辑 2:从此更改 CSS

.no-touch .navBar nav li:hover ul,
.no-js .navBar nav li:hover ul,
.navBar nav li ul.active {
    display: block;
}

对此

.navBar nav li:hover ul {
    display: block;
}

为所有用户解决了这个问题。但是，遇到问题的同一用户无法单击菜单中的任何链接。如果他们右键单击 > 在新选项卡中打开链接，对他们来说效果很好。

Answer 1

这就是正确的做法...

HTML:

<ul>
    <li>link 1</li>
    <li>link 2</li>
    <li class="more">more</li>
    <ul>
        <li>link 3</li>
        <li>link 4</li>
    </ul>
</ul>

CSS:

ul ul {
    display: none;}

.more:hover + ul {
    display: block;}

您需要注意的是，在选择器中使用+。在你的悬停状态之后的任何事情都需要这个，所以它知道直接的 sibling 需要受到影响。