CSS と HTML を使用してホバー時の画像の重なりを防ぐ方法

CSS/HTML を使用したホバー時の画像のオーバーラップの修正

CSS と HTML を使用してホバー時の画像を変更しようとすると、元の画像が表示されなくなる問題が発生することはよくあります。表示されたままになるか、新しい画像が不適切に拡大縮小されて表示されます。この問題を解決する方法は次のとおりです。

HTML に があります。 ID が「Library」の要素:

<img src="LibraryTransparent.png">

CSS には次のスタイル ルールがあります:

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

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

ここで問題となるのは、背景を変更しているときです。ホバー状態の画像を表示する場合、元の画像は非表示になりません。これを修正するには、display プロパティを使用して、ホバー時に元の画像を非表示にすることができます。

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

または、JavaScript を使用して の src 属性を変更することもできます。ホバー時の要素:

document.getElementById("Library").onmouseover = function() {
  this.src = 'LibraryHoverTrans.png';
};

document.getElementById("Library").onmouseout = function() {
  this.src = 'LibraryTransparent.png';
};

これらのソリューションのいずれかを実装すると、元の画像が非表示になり、画像の上にマウスを移動したときに新しい画像が正しく拡大縮小されて表示されるようになります。

以上がCSS と HTML を使用してホバー時の画像の重なりを防ぐ方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。