отключение наведения для родительского элемента li, когда наведен указатель мыши на другой элемент li внутри ul - PullRequest
Новая
       7

отключение наведения для родительского элемента li, когда наведен указатель мыши на другой элемент li внутри ul

0 голосов
/ 04 января 2019

У меня есть элемент li с элементом ul и некоторыми элементами li внутри. Эти элементы li содержат a элементов, использующих href. Один из этих a элементов имеет тот же путь, что и li, который содержит ul.

При наведении указателя мыши на элемент li он также отображает родительский элемент ul. Как я могу изменить это, не давая им разные пути?

Я уже пробовал установить «указатель-события: нет», но он не работает. Он отключает все эффекты на элементе, и я хочу просто удалить наведение. 

.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 с одинаковым путем парили отдельно.

1 Ответ

0 голосов
/ 04 января 2019

Также добавьте состояние наведения для UL, сбросив цвет: 

ul ul&:hover { ... };
...