: нет() не работает правильно

Question

У меня есть Navbar состоят из ul и некоторых li и a элементов, как показано ниже:

/*Fonts*/ 
 
@import url(https://fonts.googleapis.com/css?family=Libre+Baskerville); 
 

 
/*Header*/ 
 
.header-wrapper { 
 
    background-color: #696969; 
 
\t height: 53px; 
 
\t width: 100%; 
 
\t top: 0; 
 
\t margin: 0; 
 
    \t padding: 0;} 
 
.header-nav { 
 
\t background-color: darkblue; 
 
\t top: 0; 
 
\t height: 48px; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t list-style-type: none;} 
 
.header-nav-element { 
 
\t float: left;} 
 
.header-nav-element-logo { 
 
\t height: 48px;} 
 
.header-nav-element-link { 
 
\t display: block; 
 
\t text-decoration: none; 
 
\t color: white; 
 
\t padding: 14px 16px; 
 
\t font-family: "Libre Baskerville", serif; 
 
\t transition-duration: 0.3s} 
 
.active { 
 
\t background-color: #696969;} 
 
.header-nav-element-link:hover:not(.active) { 
 
\t background-color: #808080;}

<div class="header-wrapper"> 
 
    <ul class="header-nav"> 
 
    <li class="header-nav-element noselect"><img src="../img/indexlogo.JPG" alt="" class="header-nav-element-logo"></li> 
 
    <li class="header-nav-element noselect active"><a href="#" class="header-nav-element-link">Home</a></li> 
 
    <li class="header-nav-element noselect"><a href="#" class="header-nav-element-link">Bio</a></li> 
 
    <li class="header-nav-element noselect"><a href="#" class="header-nav-element-link">Stances</a></li> 
 
    <li class="header-nav-element noselect"><a href="#" class="header-nav-element-link">Solutions</a></li> 
 
    </ul> 
 
</div>

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

Answer 1

Это потому, что ваш :not(.active) прикладывается к a но active класс на своих родителей, то li

Вы можете это исправить, делая это -

.header-nav-element:not(.active):hover .header-nav-element-link

Или, изменив HTML, переместив класс active на элемент с классом header-nav-element-link.

Answer 2

В соответствии с the MDN documentation of :not():

Этот селектор применяется только к одному элементу; вы не можете использовать его, чтобы исключить всех предков.

.header-nav-element является предком .header-nav-element-link.

Изменение:

.header-nav-element-link:hover:not(.active) { 
    background-color: #808080;} 

к:

.header-nav-element:hover:not(.active) { 
    background-color: #808080;} 

скорректированным сниппета:

.header-nav { 
 
    background-color: darkblue; 
 
    top: 0; 
 
    height: 48px; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 
.header-nav-element { 
 
    float: left; 
 
} 
 
.header-nav-element-logo { 
 
    height: 48px; 
 
} 
 
.header-nav-element-link { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: white; 
 
    padding: 14px 16px; 
 
    font-family: "Libre Baskerville", serif; 
 
    transition-duration: 0.3s 
 
} 
 
.active { 
 
    background-color: #696969; 
 
} 
 
.header-nav-element:hover:not(.active) { 
 
    background-color: #808080; 
 
}

<ul class="header-nav"> 
 
    <li class="header-nav-element noselect"><img src="../img/indexlogo.JPG" alt="" class="header-nav-element-logo"></li> 
 
    <li class="header-nav-element noselect active"><a href="#" class="header-nav-element-link">Home</a></li> 
 
    <li class="header-nav-element noselect"><a href="#" class="header-nav-element-link">Bio</a></li> 
 
    <li class="header-nav-element noselect"><a href="#" class="header-nav-element-link">Stances</a></li> 
 
    <li class="header-nav-element noselect"><a href="#" class="header-nav-element-link">Solutions</a></li> 
 
</ul>