CODEWITHSUNDEEP
htmlcss
Megha
Megha

Reputation: 220

css on a and a:hover not working

I am not sure where I am going wrong but the css on a and a:hover doesnt seem to work. I cant see the background of the li elements changing to blue when I hover over them.Can anyone help? Any help will be really appreciated.

The HTML is

<body>
    <div id="navbar">
         <ul>
             <li><a href="#">home</a></li>
             <li><a href="#">nature</a></li>
             <li><a href="#">travel</a></li>
             <li><a href="#">people</a></li>
             <li><a href="#">random</a></li>
             <li><a href="#">bio</a></li>
             <li><a href="#">contact</a></li>
          </ul>
     </div>
 </body>

the CSS is

#navbar ul{
    float:left;
    margin:0;
    width:600px;
    list-style : none;
    padding-top:30px;
 }

 #navbar ul li
 {
      vertical-align: middle;
      display: inline;
      margin: 0;
      text-align:center;
      font-family: Calibri;
      padding-left:15px;
      font-size:20px;
      font-weight:normal;
      list-style-type: none;
      color:#808080;
}

#navbar ul li a
{
    text-decoration: none;
    white-space: nowrap;
    line-height: 45px;
    padding: 5px 5px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
     border-radius: 4px;
     color: #666;
 }

 #navbar ul li a : hover 
 {
     color:#FFFF00;
     background-color: #4caef2; 
 }

Upvotes: 2

Views: 1229

Answers (4)

Rahul S
Rahul S

Reputation: 643

Please remove the space b/w colon and hover ie,

navbar ul li a : hover should be #navbar ul li a:hover

Upvotes: 2

Andr&#233; R.
Andr&#233; R.

Reputation: 1647

change 

#navbar ul li a : hover

to

#navbar ul li a:hover

please

if you want to apply a pseudo class like hover you have to append it directly after the selector you are applying the pseudclass to, separated by a ':' without any additional spaces.

Upvotes: 1

enguerranws
enguerranws

Reputation: 8233

The syntax for pseudo-classes is :

selector:pseudoclass

So in your case :

#navbar ul li a:hover

Upvotes: 0

Quentin
Quentin

Reputation: 943547

You can't add random spaces in selectors.

This is an error:

#navbar ul li a : hover

Remove all the spaces except the actual descendant combinators:

#navbar ul li a:hover

This would have been picked up if you had used a validator.

Upvotes: 5

Related Questions