マウスオーバーで画像を別の画像に変更しようとしています。具体的には、訪問者がこれにカーソルを合わせると、次のようになります。
画像は次のように変わります。
現在のコード
できるだけ軽量にしたいと思います。しかし、画像と背景のCSSはうまくいきません。私のコードは次のとおりです。
<div id="featured-box-right"><a href="/videos/"
target="_self"><img src="../images/box-featured-home-right.png" title="videos"
alt="videos" width="300" height="150"></a></div>
しかし、これをCSSに対して行うと、次のようになります。
#featured-box-right a:hover
{
background-image: url(../images/box-featured-home-right-hover.png);
}
効果は正しくありません。それは背景ではありません。実際の画像です。これを可能な限り軽量にする方法についてのガイダンスをいただければ幸いです。