没有应用鼠标悬停的下拉文字颜色

Posted 2021-05-05

我做了一个固定的导航栏，但似乎无法确定为什么当你将鼠标悬停在“主菜单”上然后悬停子菜单时，“主菜单”的文字不会改变颜色？

#nav-top > ul > li > a:hover, .nav-top-menu-button:hover {
    background-color: #fff;
    color: #000;
}

的jsfiddle：https://jsfiddle.net/owboLy2s/1/

答案

您可以使用#nav-top > ul > li:hover > a, .nav-top-menu-button:hover而不是#nav-top > ul > li > a:hover, .nav-top-menu-button:hover。所以，改变是:hover应该向前移动一步。否则，只有你的<a href=''>Menu</a>代码会触发颜色变化。

另一答案

li.nav-top-menu-button:hover a{
   color:#000!important;
}

这应该工作。它针对包含“菜单”链接的主要li。由于下拉菜单仍然位于li内部，因此在选择子链接时您仍然会将其悬停。 !important只是说它优先于任何其他造型。