CSS または JavaScript を使用してホバー時に画像を変更するときに画像の重なりを防ぐにはどうすればよいですか?

HTML、CSS、JavaScript を使用してホバー時の画像の外観をカスタマイズする

ホバー時の画像の遷移を処理するときに、基本的な画像が表示されたままになり、更新された画像が希望の高さと幅に調整されず、

コード スニペット内:

<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 セレクター内で次の CSS プロパティを使用できます。

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

background-size: cover プロパティにより、更新された画像が画面のスペース全体を占めるようになります。

あるいは、JavaScript を使用して画像の遷移を処理することもできます。このアプローチにより、画像の src 属性を直接変更できます:

<img  src="/static/imghwm/default1.png" data-src="LibraryTransparent.png" class="lazy" onmouseover="this." onmouseout="this." alt="CSS または JavaScript を使用してホバー時に画像を変更するときに画像の重なりを防ぐにはどうすればよいですか?" >

以上がCSS または JavaScript を使用してホバー時に画像を変更するときに画像の重なりを防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。