ホバー画像が元の画像を置き換えずに重なるのはなぜですか?

CSS/HTML ホバーによる画像表示の変更

マウスホバー時に画像を別の画像に置き換えようとすると、元の画像が表示されたままになっているか、新しい画像の寸法調整に失敗して画像が重なってしまいます。この問題と考えられる解決策を次に示します。

提供されたコードは問題を示しています:

<img  src="/static/imghwm/default1.png" data-src="LibraryTransparent.png" class="lazy" alt="ホバー画像が元の画像を置き換えずに重なるのはなぜですか?" >

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

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

このコードでは、ホバー時に背景画像を設定することで、2 番目の画像が確実に表示されます。画像が最初の上に表示されますが、画像自体のサイズ変更や位置が適切に調整されない可能性があります。

代替解決策: を使用するJavaScript

もう 1 つのオプションは、JavaScript を利用して画像の変更を処理することです。

<img  src="LibraryTransparent.png" onmouseover="this.src='LibraryHoverTrans.png';" onmouseout="this.src='LibraryTransparent.png';" alt="ホバー画像が元の画像を置き換えずに重なるのはなぜですか?" >

このアプローチでは、マウスが上に移動すると、onmouseover イベントによって画像ソースが代替の画像ソースに変更されます。 、onmouseout イベントは、マウスが離れるとソースを元の画像に戻します。 JS を使用すると、画像操作をより直接的に制御でき、画像間のシームレスな移行が保証されます。

以上がホバー画像が元の画像を置き換えずに重なるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。