将css添加到悬停菜单父级但不是子级

Question

我尝试做类似的事情：CSS Menu - Keep parent hovered while focus on submenu 我正在使用！重要来覆盖bootstrap颜色 它适用于父母，但我不希望孩子li> a受影响

.hover-li：悬停一个{

color: blue !important;
}

.hover-li ul li  {
    color: white !important;
}

结构是这样的：

<li class = "hover-li">
<a></a>
<ul>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
</li>

Answer 1

试试这个

.hover-li:hover > a {
  color: blue !important;
}

它只影响直接儿童