CODEWITHSUNDEEP
csshtmlhover
Isaac Corbrey
Isaac Corbrey

Reputation: 593

:not() Not Functioning Correctly

I have a navbar made up of a ul and some li and a elements, as shown below:

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

/*Header*/
.header-wrapper {
    background-color: #696969;
	height: 53px;
	width: 100%;
	top: 0;
	margin: 0;
 	padding: 0;}
.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-link:hover:not(.active) {
	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>

As you can see, the active tab is lighting up on hover, even though I have specified not to. Why is this happening, and how can I fix it?

Upvotes: 1

Views: 35

Answers (2)

Rahul Desai
Rahul Desai

Reputation: 15501

As per the MDN documentation of :not():

This selector only applies to one element; you cannot use it to exclude all ancestors.

.header-nav-element is ancestor of .header-nav-element-link.

Change:

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

to:

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

Corrected snippet:

.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>

Upvotes: 0

Rose Robertson
Rose Robertson

Reputation: 1256

It's because your :not(.active) is being applied to the a but the active class is on its parent, the li

You could fix it by doing this -

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

Or by modifying the HTML by moving the active class to the element with the class header-nav-element-link.

Upvotes: 4

Related Questions