CODEWITHSUNDEEP
htmlcsshover
Adam Schwartz
Adam Schwartz

Reputation: 61

How do I turn off hover for this <li>?

I'm trying to turn off the hover for the current page in a navigation menu.

div.nav {
  width: 100%;
  padding: 6px;
  height: 40px;
}
.nav li {
  color: #FFFFFF;
  display: inline;
  list-style-type: none;
  text-align: center;
  text-transform: uppercase;
  padding: 20px;
  margin: 0px;
  height: 40px;
}
li.current {
  background-color: #424242
}
li.current:hover {
  background-color: inherit;
}
.nav li:hover {
  background-color: #737373;
<div class="nav">
  <ul>
    <li class="current">Home</li>
    <li><a href="null">About</a>
    </li>
    <li><a href="null">Contact</a>
    </li>
    <li><a href="null">Gallery</a>
    </li>
  </ul>
</div>

Here is the jsfiddle: https://jsfiddle.net/swordams/jk6z5aqj/

I want the li for home to stay dark and not change on hover. I've tried setting the hover background color to "inherit", but that doesn't work.

Thanks!

Upvotes: 0

Views: 1786

Answers (3)

sukesh sudharman
sukesh sudharman

Reputation: 110

just make the active/current li background color important

li.current {
    background-color: #424242 !important;
}

Upvotes: 0

onotype
onotype

Reputation: 61

You can use the solution by j08691 but ultimately, the problem with your css is that .nav li:hover is more specific than li.current:hover. Tacking a .nav will do the trick.

.nav li.current:hover {
  background-color: inherit;
}

Upvotes: 0

j08691
j08691

Reputation: 207923

You can use the CSS :not() pseudo-class:

.nav li:hover:not(.current) {
    background-color: #737373;
}

jsFiddle example

Upvotes: 3

Related Questions