CSS または JavaScript を使用してホバー時に画像をシームレスに切り替えるにはどうすればよいですか?

CSS/HTML を使用してホバー時に画像を動的に切り替える方法

マウスをホバーしたときに画像が動的に変化するように設定する場合、次のことが重要です。望ましい効果が確実に達成されるように、特定のニュアンスに対処します。元の画像が残って新しい画像と重なっているときに、高さと幅がそれに応じて調整されない場合に、一般的な問題が 1 つ発生します。

コード スニペット:

このサンプル HTML について考えてみましょう。 /CSS コード:

<img  src="/static/imghwm/default1.png" data-src="LibraryTransparent.png" class="lazy" alt="CSS または JavaScript を使用してホバー時に画像をシームレスに切り替えるにはどうすればよいですか?" >

#Library {
    height: 70px;
    width: 120px;
}

#Library:hover {
    background-image: url('LibraryHoverTrans.png');
    height: 70px;
    width: 120px;
}

で背景画像を使用する:hover state は、画像を動的に変更する 1 つのアプローチです。ただし、JavaScript を使用して追加のソリューションを使用することもできます:

JavaScript オプション:

<img  src="LibraryTransparent.png" onmouseover="this.src='LibraryHoverTrans.png';" onmouseout="this.src='LibraryTransparent.png';" alt="CSS または JavaScript を使用してホバー時に画像をシームレスに切り替えるにはどうすればよいですか?" >

このシナリオでは、JavaScript を利用して、マウスを押したときに画像ソースを交換します。上にカーソルを置くと、マウスアウト時に復元されます。この方法では、元の画像が消え、新しい画像がシームレスに置き換えられ、重複やサイズの問題が回避されます。

以上がCSS または JavaScript を使用してホバー時に画像をシームレスに切り替えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。