Bir link bir resim var. Kullanıcı bağın üzerine geldiğinde farklı bir resim göstermek istiyorum.

Şu anda bu kodu kullanıyorum:

<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');
}

Ama bir sürü sorunlar yaşıyorum: div CSS kuralları (unsur sadece Firebug I görüntülemek için ilgili CSS kurallarını gösteren değil) açmıyor.

Belki de bunu biliyorum da bu geçersiz HTML olmasıdır: <a> etrafında <div>. bir koyamazsın Eğer <span> geçiş eğer ancak, o zaman you can't set a height and width on a span reliably çünkü daha büyük sorunlarım almak gibi görünüyor.

Yardım! Bunu nasıl daha iyi yapabilirim?

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

bağlantı için bir sınıf kendisi kullanmak ve div unutmayın

.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');
}