在 ul 内的另一个 li 元素上悬停时关闭父 li 元素的悬停

Question

我有一个 li 元素，里面有一个 ul 元素和一些 li 元素。这些 li 元素具有使用 href 的 a 元素。这些a 元素之一与包含ul 的li 具有相同的路径。

当我将鼠标悬停在这些 li 元素上时，它也会悬停在 ul 的父 li 上。我怎样才能改变它而不给他们不同的路径？

我已经尝试设置“指针事件：无”，但它不起作用。它禁用了元素上的所有效果，我只想删除悬停。

.scroll-sidebar {
 padding-bottom: 6rem;
 } 
.collapse.in {
display: block;
}
.sidebar-nav { 
background: $sidebar; padding: 0; 
ul {
  margin: 0;
  padding: 0;
li {
  list-style: none;
  a {
    color: $sidebar-text;
    padding: 0.8rem 3.5rem 0.8rem 1.5rem;
    display: block;
    font-size: 1.4rem;
    &.active,
    &:hover {
      color: $themecolor;
      i {
        color: $themecolor;
      }
    }
    &.active {
      font-weight: 500;
      color: $dark;
    }
  }
  ul {
    padding-left: 28px;
    li a {
      padding: 0.7rem 3.5rem 0.7rem 1.5rem;
    }
    li a.active {
      background: $light-info;
    }
    ul {
      padding-left: 1.5rem;
    }
  }
  &.nav-small-cap {
    font-size: 1.2rem;
    margin-bottom: 0;
    padding: 1.4rem 1.4rem 1.4rem 2rem;
    color: $dark;
    font-weight: 500;
  }
  &.nav-devider {
    height: 1px;
    background: $border;
    display: block;
    margin: 2rem 0;
  }
}
}  
>ul>li>a {
border-left: 3px solid transparent;
i {
  width: 2.7rem;
  font-size: 1.9rem;
  display: inline-block;
  vertical-align: middle;
  color: $sidebar-icons;
}
.label {
  float: right;
  margin-top: 0.6rem;
}
&.active {
  font-weight: 400;
  background: $light-info;
  color: $themecolor-alt;
}

---

<li>
    <a class="waves-effect waves-dark" href="{{ path('list_tests') }}" aria-expanded="false">
        <i class="mdi mdi-creation"></i>
        <span class="hide-menu">Tests</span>
    </a>
    <ul aria-expanded="false" class="collapse">
        <li><a href="{{ path('list_tests') }}">Tests</a></li>
        <li><a href="{{ path('list_test_data') }}">Data</a></li>
        <li><a href="{{ path('list_application_tests') }}">Test Applications</a></li>
    </ul>
</li>        

我希望这两个具有相同路径的 li 元素分别悬停。

Answer 1

同时为 UL 添加悬停状态，重置颜色：

ul ul&:hover { ... };