Hover problems nav bar (HTML/CSS)

Question

I've made a nav bar and I'd like to use the hover selector only on the pages that aren't active. So I used the selector a:not(.active):hover but it doesn't work. I'd really appreciate if someone could help me.

ul 
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display:block;
    position:absolute;
    top:-2px;
    left:0;
    right: 0;
    background-color: darkred;
}

li 
{
    float: left;
}

li a 
{
    display: block;
    color: white;
    text-align: center;
    padding: 20px 23px;
    text-decoration: none;
}

li a:not(.active):hover
{
    background-color: #B22222;
}

.active {
    background-color: #470005;
}

<ul>
                <li class="active"><a href="home.html">Home</a></li>
                <li><a href="#about">About me</a></li>
                <li><a href="#contacts">Contacts</a></li>
                <li><a href="#help">Help</a></li>
                <li><a href="#other">Other Works</a></li>
                <li><a href="#news">News</a></li>
</ul>

It should be `a:hover:not(.active)` – Prajwal Jun 11 '17 at 10:43 — Prajwal, Jun 11 '17 at 10:43

score 1 · Accepted Answer · edited Jun 11 '17 at 10:52

1

Your :not pseudo-class is on your link. However, the active class is on the li.

li:not(.active) a:hover should work

JSfiddle Example: https://jsfiddle.net/ubntkk46/

edited Jun 11 '17 at 10:52

Jennifer Goncalves

1,442
1
12
29

answered Jun 11 '17 at 10:44

Axnyff

9,213
4
33
37

Ehsan · Answer 2 · 2017-06-11T11:16:42.227

This Fix It :

li:not(.active):hover a {

}

Full Code:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display:block;
  position:absolute;
  top:-2px;
  left:0;
  right: 0;
  background-color: darkred;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 20px 23px;
  text-decoration: none;
}

li:not(.active):hover a {
  background-color: #B22222;
}

.active {
  background-color: #470005;
}

<ul>
  <li class="active"><a href="home.html">Home</a></li>
  <li><a href="#about">About me</a></li>
  <li><a href="#contacts">Contacts</a></li>
  <li><a href="#help">Help</a></li>
  <li><a href="#other">Other Works</a></li>
   <li><a href="#news">News</a></li>
</ul>

score 0 · Answer 3 · answered Jun 11 '17 at 10:46

The class is linked to your li element, not the hyperlink

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: block;
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  background-color: darkred;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 20px 23px;
  text-decoration: none;
}

li:not(.active) a:hover {
  background-color: #B22222;
}

.active {
  background-color: #470005;
}

<ul>
  <li class="active"><a href="home.html">Home</a></li>
  <li><a href="#about">About me</a></li>
  <li><a href="#contacts">Contacts</a></li>
  <li><a href="#help">Help</a></li>
  <li><a href="#other">Other Works</a></li>
  <li><a href="#news">News</a></li>
</ul>

score 0 · Answer 4 · answered Jun 11 '17 at 10:52

You could just apply the same background colour to the active a tag and the active a tags hover state, and a different background colour to the the non active a tags hover states. This would allow it to work in IE8, because :not isn't supported in older versions of IE.

ul 
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display:block;
    position:absolute;
    top:-2px;
    left:0;
    right: 0;
    background-color: darkred;
}

li 
{
    float: left;
}

li a 
{
    display: block;
    color: white;
    text-align: center;
    padding: 20px 23px;
    text-decoration: none;
}

li a:hover {
    background-color: #B22222;
}

li.active a, li.active a:hover {
    background-color: #470005;
}

<ul>
  <li class="active"><a href="home.html">Home</a></li>
  <li><a href="#about">About me</a></li>
  <li><a href="#contacts">Contacts</a></li>
  <li><a href="#help">Help</a></li>
  <li><a href="#other">Other Works</a></li>
  <li><a href="#news">News</a></li>
</ul>

Hover problems nav bar (HTML/CSS)

4 Answers4