当悬停 child 时保持 parent 悬停状态

Question

我找到了多种有效的解决方案，但似乎没有任何方法可以解决由此产生的另一个问题。当我添加用于执行此操作的 CSS 和 jQuery 代码并刷新浏览器以查看它是否有效时，它确实......主要是。 parent 元素的背景保持悬停状态，但文本逐渐变回其原始状态，non-hovered 状态，只留下橙色 (#d35400) 背景（因为文本最初是颜色，但将鼠标悬停在项目上时变为白色 [#ecf0f1]。

此时我不知道该怎么办。我已经尝试了 4-5 种不同的解决方案，使 parent 元素保持其悬停状态，但 parent 元素的文本不会保持其应有的颜色。

我会在此处包含代码，但恐怕不允许我这样做，因为我需要包含多少代码。所以这里有一个 link：http://jsfiddle.net/Lmdunrzj/2/。请将鼠标悬停在 "Roster"（左数第二个菜单项）上，然后将鼠标悬停在其任何 drop-down 项上。背景保持其悬停状态但文本不会。我已经尝试了所有我能想到的方法并且 none 我尝试的方法有所帮助（显然）。

期待您的回复和帮助！提前致谢！

Answer 1

检查这个Fiddle

我没有更改您的代码中的任何内容，我所做的只是包含 jQuery.2.1.4，它似乎可以正常工作。这会让我相信您的 html 页面上没有 jQuery 资源。如果这不能解决您的问题，请告诉我更多详细信息。

这是 jquery 资源：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Answer 2

如果将 :hover 事件设置为 <li> 父项而不是 <a> 标签，则可以在悬停其他子项时保持整个导航项的悬停状态.

header div#nav-container nav#nav-menu ul#nav-items li.roster-li:hover > a {
  color: #ecf0f1;
}

而且您可能不应该在 CSS 中使用那么多 id（或任何）ID，因为这会使覆盖样式变得更加困难。

尝试阅读规范，因为它会加快开发和页面加载速度。 http://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/ http://www.impressivewebs.com/css-specificity-irrelevant/

当悬停 child 时保持 parent 悬停状态

Keep parent hover state when child is hovered

html

css

jquery

parent-child

hover