Question

I have an image that is a link. I want to show a different image when the user hovers over the link.

Currently I’m using this code:

<a href="http://twitter.com/me" title="Twitter link">
<div id="twitterbird" class="sidebar-poster"></div></a>

div.sidebar-poster {
margin-bottom: 10px;
background-position: center top;
background-repeat: no-repeat;
width: 160px;
}
#twitterbird {
background-image: url('twitterbird.png');
}
#twitterbird:hover {
background-image: url('twitterbird_hover.png');
}

But I’m having loads of problems: the div isn’t picking up the CSS rules (the element just isn’t showing the related CSS rules when I view it in Firebug).

Perhaps this is because (as I know) this is invalid HTML: you can’t put an <a> around a <div>. However, if I switch to <span> then it seems I get bigger problems, because you can’t set a height and width on a span reliably.

Help! How can I do this better?

Answer 1

 <a href="http://twitter.com/me" class="twitterbird" title="Twitter link"></a>

use a class for the link itself and forget the div

.twitterbird {
 margin-bottom: 10px;
 width: 160px;
 height:160px;
 display:block;
 background:transparent url('twitterbird.png') center top no-repeat;
}

.twitterbird:hover {
   background-image: url('twitterbird_hover.png');
}