css - Twitter Bootstrap 导航栏悬停在下拉菜单中

Question

我确定我的标题不是最容易理解的。我会尝试解释我想做什么。

如果您转到此 URL ( http://buffalo.demo.libguides.com) 并将鼠标悬停在全局导航(查找图书馆资料、我的帐户、获取帮助等)上，您会看到悬停是蓝色的。但是，当您将鼠标悬停在下拉菜单上时，它会变回灰色。我希望它在悬停在下拉菜单上时保持蓝色。

我曾使用旧版本的 Bootstrap 进行过此操作，但我在使用这个时遇到了问题。任何帮助，将不胜感激。

这是一个旧版本有效的 URL。 http://library.buffalo.edu

Answer 1

尝试:

.content-block .navbar-nav > li:hover a {
    color: #fff;
    background-color: #062198;
}

现在 .content-block .navbar-nav > li > a:hover 在 style-gudes.css 的 1466 行是控制导航项的背景颜色。由于您在 anchor 元素上使用悬停状态，它不会包裹形成下拉列表的嵌套 ul，因此一旦光标离开该元素，它就不会保持蓝色并恢复为默认颜色.

Hook 包裹下拉列表 ul 的 li 的悬停状态。当悬停 li 时定位 anchor 元素，li:hover a。现在，只要悬停下拉菜单的父 li，a 也会在 li 悬停时设置样式。