css - 将鼠标悬停在子元素 CSS 上时保持父级事件

Question

当悬停在其子元素上时，我试图保持父元素处于事件状态。这是我的代码。

<nav class="desktop-menu">
   <ul class="navbar-nav">
    <li><a href="#">About</a></li>
    <li><a title="Business Lines" href="#">Business Lines</a>    
       <ul role="menu" class=" dropdown-menu sub-nav">
         <li><a title="Energy" href="#">Energy</a></li>
       </ul>
    </li>    
   </u>
</nav>

.desktop-menu .navbar-nav>li>a:hover {
    color: #fff;
    background: #67686b;
}
.desktop-menu .dropdown-menu {
    min-width: 220px;
    position: absolute;
    top: 100%;
    border: none;
    background: #67686b;
    color: #fff;
    box-shadow: none;
}
.desktop-menu .dropdown-menu li a:hover {
    color: #FBB914;
}
//Css to keep parent active
.desktop-menu .dropdown-menu:hover .desktop-menu .navbar-nav>li>a{
    color: #fff;
    background: #67686b;
}

任何人都可以帮助我如何实现这一目标？提前致谢。

Answer 1

我建议将悬停 Action 匹配到“li”父元素而不是“a”标签，这样您也可以匹配子元素，就像示例一样

.desktop-menu .navbar-nav>li:hover >a{
    color: #fff;
    background: #67686b;
}
.desktop-menu .dropdown-menu {
    min-width: 220px;
    border: none;
    box-shadow: none;
}
.desktop-menu .dropdown-menu li a:hover {
    color: #FBB914;
}
//Css to keep parent active
.desktop-menu .navbar-nav>li:hover .desktop-menu .navbar-nav>li>a{
    color: #fff;
    background: #67686b;
}

<nav class="desktop-menu">
   <ul class="navbar-nav">
    <li><a href="#">About</a></li>
    <li><a title="Business Lines" href="#">Business Lines</a>    
       <ul role="menu" class=" dropdown-menu sub-nav">
         <li><a title="Energy" href="#">Energy</a></li>
       </ul>
    </li>    
   </u>
</nav>