cssの画像切り替え

質問

宜しくお願いします。

cssでのhoverを使った画像の切り替えを教えてください。

○html
<dl id="dl">
　<dt id="dt"><a href="#"><img src="img/image1.jpg" alt="" /></a></dt>
　<dd>あ</dd>
</dl>

○css
#dl
　　　　{
　　　　width: 170px;
　　　　height: 170px;
　　　　margin: 0;
　　　　}

#dt a
　　　　{
　　　　text-decoration: none;
　　　　}

#dt a:hover
{
background-image: url(img/image2.jpg);
text-decoration: none;
　　　　}

というソースで、cssを使い画像を切り替えたいのですが、できません。
html指定で、<img src="～">で画像を表示させておき、
切り替える方法としましては、hoverを使いbackground-imageを使うしかないと思います。
background-imageからbackground-imageへの切り替えは、できるのですが、今回の場合は、どうしてもhtml指定で、<img src="～">からの切り替えを行いたいです。
そもそも、html指定の、<img src="～">で画像を表示する場合、cssで切り替えれるものなのでしょうか?

出来る限り、cssでの切り替えをしたいと考えています。

どなたか、分かる方お願いします。

回答No.1

tochansa · ベストアンサー

こいつを追加してみてください。

a:hover img{
visibility:hidden;
}

お礼

私のミスでした。
場所も、hoverもうまくでき無事解決できました。
本当に、ありがとうございます。

補足

追加してみたのですが、
hoverした時に、うまく消えてくれませんでした。
消える事は消えるのですが、ブレる?と表現すればよいのか・・・
ブレがなくなってくれればいいのですが。
それと切り替わる画像の位置とサイズがなぜかおかしかったです。
サイズに関しては、切り替わる画像が全体表示されるのではなく、一部分しか表示されません。
どういう事でしょうか?