css - 画像変更なしのロールオーバー

Question

マウスをその上に置いたときに変更したい小さなサムネイル画像があります。ロールオーバーで画像を交換せずにこれを行う方法があるかどうか疑問に思いました。たとえば、CSSを使用して、ロールオーバー時に不透明度を変更できますか？変更を加えるためにロールオーバーでCSSを使用して画像を操作する方法について他にアイデアがあれば、私はオープンです。

ありがとう！

Answer 1

両方の画像を 1 つの大きな画像に配置し、それを背景画像として使用して、ロールオーバー時の位置のみを変更することができます。

Answer 2

CSS3 では、不透明度オプションがあります。こうすることで、何かの上にカーソルを置いたときに画像をリロードする必要がなくなります。

#div {
  background-image: url('blah.png'); 
}

#div:hover {
  opacity: 0.5;
}

それが正しい使用方法かどうかは正確にはわかりませんので、より多くの例については google を使用する必要があります。ただし、まだすべてのブラウザーが CSS3 をサポートしているわけではないため、注意が必要です。

Answer 3

:hoverタグでスタイルを使用してみてください。初期の IE エディションではあまりサポートされていない可能性があります。しかし、次のようなことができます：

img {
    border: 1px solid black;
}
img:hover {
    border: 1px solid white;
}