CODEWITHSUNDEEP
css
Mona Coder
Mona Coder

Reputation: 6316

Unable to change li Background Color on Hover

Can you please take a look at this link and let me know why I am not able to change the background color of the li on hover?

<ul class="inline">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>3</li>
  <li>3</li>
</ul>

Css:

.inline li{
    width:18% !important;
    background:#FFF  !important;
}
.inline li: hover{
    background:#A5A5A5  !important;
}

Upvotes: 7

Views: 17580

Answers (5)

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

it s because you are using !important on the not hover li and there is a space between li and :hover

.inline li{
    width:18%!important;
    background:#FFF;
}

.inline li:hover{
    background:#A5A5A5!important;
}

demo: http://jsfiddle.net/NRZeD/14/

Upvotes: 0

Cody Guldner
Cody Guldner

Reputation: 2886

The space between li and :hover is valid CSS, but not in this case. Using li :hover will apply styles when you hover over any descendant of the li. What you are using is invalid CSS. You can't have a colon between an element and a pseudo-class. So by using li:hover, you are specifiying the styles when the li is being hovered over.

I would also recommend that you not use !important, because it can cause some problems later down the road. Use more specific DOM selectors, like ul.inline li:hover.

Fiddle

Upvotes: 6

R Lacorne
R Lacorne

Reputation: 604

You have an extra space before hover. It should be:

.inline li:hover {
Stylings
}

Upvotes: 0

Anton Belev
Anton Belev

Reputation: 13523

Edited jsfiddle. Remove the empty space before hover.

.inline li:hover{

    background:#A5A5A5  !important;
}

Upvotes: 2

khollenbeck
khollenbeck

Reputation: 16157

You have an extra space before hover.

.inline li:hover{
    background:#A5A5A5  !important;
}

Upvotes: 9

Related Questions