CODEWITHSUNDEEP
htmlcss
Sharon Chai
Sharon Chai

Reputation: 517

hover doesn't apply background to li css

What's wrong with my :hover below? I dosen't seem to have effect. Tried overflow hidden but it doesn't appear any effect.

.tabs-nav li:hover {

}

demo https://jsfiddle.net/tpd83jxx/

Upvotes: 1

Views: 52

Answers (3)

Bhuvana Basanth
Bhuvana Basanth

Reputation: 39

Below code works for me

.tabs-nav li :hover {
  color: white;
  background: red;
}

If I am not wrong Space is added to apply hover to the child of li. In this case for anchor tag

Upvotes: 0

Athul Nath
Athul Nath

Reputation: 2606

Nothing wrong with the css ,Here you applied background for a tag.

So change the hover to a

.tabs-nav li:hover a {
    color: white;
    background: red;
}

Upvotes: 1

Aryan Twanju
Aryan Twanju

Reputation: 2516

You have to apply the :hover effect in a:hover because you have already applied background-color to a element. Try and add this code.

.tabs-nav a:hover {
  background-color: red;
}

Upvotes: 2

Related Questions