单击css上的子项时取消绑定父项

Question

我找到解决此问题的方法有点困难。

我有悬停效果，当我点击子菜单上的li时，父li也会突出显示。这是一张照片。

有没有办法只用CSS做到这一点？我不介意jQuery解决方案，但只是好奇它是否可能与css。

＆＃13;

＆＃13;

ul li:active > a
 {
    background-color: #2c3e50 !important;
    color: #fff !important;                
    opacity: 1 !important;
}

＆＃13;

<ul>
  <li class="solutions-link active" id="solutions-link">
     <a href="#" class="left-side">
         <span>Solutions</span>
      </a>  
      <a href="#" class="arrow-up right-side" aria-hidden="true" data-toggle="collapse" data-target="#hiddenMenuOne">
         <i class="fa fa-chevron-down">
         </i>
        </a> 
     <ul id="hiddenMenuOne" class="collapse first-tree">
              <li>
                <a href="#">Offices</a>
              </li>
              <li>
                <a href="#">Help</a>
              </li>
       </ul>
    <li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您应该将:active样式移至a

ul > li > a:active
 {
    background-color: #2c3e50 !important;
    color: #fff !important;                
    opacity: 1 !important;
}

<ul>
  <li class="solutions-link active" id="solutions-link">
     <a href="#" class="left-side">
         <span>Solutions</span>
      </a>  
      <a href="#" class="arrow-up right-side" aria-hidden="true" data-toggle="collapse" data-target="#hiddenMenuOne">
         <i class="fa fa-chevron-down">
         </i>
        </a> 
     <ul id="hiddenMenuOne" class="collapse first-tree">
              <li>
                <a href="#">Offices</a>
              </li>
              <li>
                <a href="#">Help</a>
              </li>
       </ul>
    <li>
</ul>