如何在子元素上保持父级的悬停状态？

Question

我尝试了很多解决方案，但没有任何方法对我有用。当我在特定HTML中的“公司”子菜单上时，我想让我的父元素保持悬停状态。

我的HTML

<nav class="main-menu">
  <ul class="sf-menu sf-js-enabled">
    <li><a href="index.html" class="sf-with-ul">company<span class="menu-arrow"></span><em></em></a>
      <ul >
        <li><a href="#">Welcome Message</a></li>
        <li class=""><a href="#" class="sf-with-ul">Company Profile<span class="menu-arrow"></span></a>
          <ul>
            <li><a href="#">Our Capabilities</a></li>
          </ul>
        </li>
        <li><a href="#">Our History</a></li>
      </ul>
    </li>
    <li class="current"><a href="services.html">services</a></li>
  </ul>
  <div class="clear"></div>
</nav>

我的CSS：

nav {
position:relative;
background:url(../images/theme/nav.png) repeat-x #e7e7e7;
min-height:68px;
margin:0;
}

.sf-menu ul {
position:absolute;
top:-999px;
display:none;
}

.sf-menu ul li {
width:100%;
}

.sf-menu li {
float:left;
position:relative;
}

.sf-menu>li>a {
display:block;
font-size:12px;
line-height:17px;
color:#2f2e2e;
font-weight:bold;
text-transform:uppercase;
width:189px;
text-align:center;
position:relative;
overflow:hidden;
padding:27px 0 24px;
}

.sf-menu>li>a>em {
display:block;
width:0;
position:absolute;
bottom:200%;
left:50%;
right:50%;
top:auto;
background:#fa5758;
height:3px;
}

ul li:hover>ul {
display:block;
-webkit-animation:fadeIn 1s;
-moz-animation:fadeIn 1s;
-o-animation:fadeIn 1s;
animation:fadeIn 1s;
}

.sf-menu>li>a:hover>em,.sf-menu>li.current>a>em,.sf-menu>li.sfHover>a>em {
bottom:0;
left:0;
right:0;
width:100%;
}

.sf-menu>li {
border-left:1px solid #d0d0d0;
}

.sf-menu>li:first-child {
border-left:none;
}

.sf-menu>li>ul,.sf-menu>li.sfHover>ul {
left:0;
top:68px;
width:190px;
z-index:99;
background:url(../images/theme/sub_ul1.png) repeat-x #676464;
padding:22px 0 24px;
}

.sf-menu>li>ul>li>a {
background:url(../images/theme/sub_li1.png) 0 -50px repeat-x;
color:#fff;
}

.sf-menu li li a:hover,.sf-menu li.sfHover li.sfHover>a {
background-position:0 0;
background-color:#b7b7b7;
color:#454545;
}

.sf-menu li li ul {
left:148px;
top:-22px;
width:190px;
z-index:99;
background:url(../images/theme/sub_ul2.png) repeat-x;
padding:22px 0 23px;
}

.sf-menu li li a {
font-size:11px;
text-transform:uppercase;
display:block;
background:url(../images/theme/sub_li2.png) 0 -50px repeat-x;
color:#454545;
padding:5px 0 5px 29px;
}

.sf-menu li li li a:hover {
background-position:0 0;
background-color:#2d2d2d;
color:#fff;
}

.sf-menu li a .menu-arrow {
display:inline-block;
width:5px;
height:3px;
text-indent:-100%;
font-size:0;
line-height:0;
background:url(../images/theme/menu_arrow.png) no-repeat;
vertical-align:middle;
margin:-3px 0 0 5px;
}

.sf-menu a:hover .menu-arrow,.sf-menu li.current>a .menu-arrow,.sf-menu .sfHover>a:hover
.menu-arrow {
background-position:0;
}

.sf-menu>li>a,.sf-menu em,.list1 a,.button,footer a {
-webkit-transition:all .5s ease;
-moz-transition:all .5s ease;
-o-transition:all .5s ease;
transition:all .5s ease;
}

ul li>ul,#menu-icon {
display:none;
}

Answer 1

这是一个简单的CSS解决方案：

.sf-menu > li:hover > a {
  background: #444;
}

我只是为了说明目的而改变背景。我把它放在CSS的底部，当我将鼠标悬停在公司上方并使用它下方的下拉列表时，主锚就会像它一样徘徊。

让我知道这是否适合你，如果它不会忘记接受答案或upvote，以便人们知道什么有效。

Here is an image of that working

由于你的问题是关于在那里保留那个橙色条的具体问题，你必须首先知道橙色条正在应用jQuery和一个名为.sfHover的类...所以那么父<li>已经这个类使橙色条在那里保持活跃。

The Fiddle with jQuery

Answer 2

如果您想使用jQuery，可能会对您有所帮助：

 $(document).ready(function() {     
        $('#child').hover(function(){     
            $('#parent').addClass('hoverClass');    
        },     
        function(){    
            $('#parent').removeClass('hoverClass');     
        });
    });