CSS :hover attribute behaving inconsistently

Question

Greetings,

I am making a site with :hover images as backgrounds of links. But oddly enough, only the first link is working at all. The others don't act like links, and don't react to the :hover event.

Here is the germane HTML:

 <a href="/" id="home-link" class="icon">Home</a>
 <a href="skills/" id="skills-link" class="icon">What I Can Do</a>
 <a href="portfolio/" id="portfolio-link" class="icon">My Portfolio</a>
 <a href="connect/" id="connect-link" class="icon">Connect With Me</a>

The first one actually goes to the correct spot. The other three don't give the browser any feedback that they are links, and do nothing when clicked. Here is my germane CSS:

 #home-link {
   background: url(icons-sprite.png) no-repeat 0 0;
   top: 30px;
   left: 30px;
 }

 #home-link:hover { background: url(icons-sprite.png) no-repeat 0 -128px; }

 #skills-link {  
   background: url(icons-sprite.png) no-repeat -128px 0;
   top: 178px;
   left: 286px;
 }

 #skills-link:hover { background: url(icons-sprite.png) no-repeat -128px -128px; }

The styles for the other two links are identical.

The first shows the :hover state perfectly. The rest remain inert.

I am deducing that there is something wrong with my HTML, but I see nothing wrong with them. This occurs in FF and Chrome.

Any ideas?

Answer 1

You are targeting only one link using the id:

#home-link:hover

Use this CSS instead:

#container a:hover { background: url(icons-sprite.png) no-repeat 0 -128px; }

Where #container is the id of element containing your links.

Answer 2

#home-link {...}
#home-link:hover {...}

using this, you are adressing thw only element that have the id 'home-link', which was your first link. Since other links have diffrent id's they do not use your css block...

try to use class definition instead of id:

.icon {
 background: url(icons-sprite.png) no-repeat 0 0;
 top: 30px;
 left: 30px;
}

.icon:hover { background: url(icons-sprite.png) no-repeat 0 -128px; }

Since all of your links have class="icon", you will not have problem...

Answer 3

Fixed it!

By taking out and adding in blocks of CSS I was able to discover that another particular HTML block that was after the links in the page and was positioned absolutely was messing them up.

Because it was on top of the links, they weren't firing. So I moved it below the links and everything works just dandy.