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 { ... };

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

1 个答案: