CSS または JavaScript を使用してホバー上の画像を適切に変更するにはどうすればよいですか?

CSS/HTML を使用したホバー時の画像の外観の変更

別の画像を表示するように画像を設定すると、問題が発生する可能性があります。マウスを上に置くと画像が表示されますが、元の画像はまだ表示されており、新しい画像は重なるか、サイズが変わりません。 HTML/CSS の初心者にとって、この一見単純なタスクは困難を伴う可能性があります。

この問題を解決するには、透明な画像ファイルを使用して、元の画像が透明になるように適切に設定されていることを確認してください。さらに、適切なセレクター構文を使用して、CSS ルールが正しい要素をターゲットにしていることを確認してください:

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

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

ただし、CSS を使用しても問題が解決しない場合は、JavaScript を使用した代替方法を検討できます:

<img src='LibraryTransparent.png' onmouseover="this.src='LibraryHoverTrans.png';" onmouseout="this.src='LibraryTransparent.png';" />

この JavaScript コードでは、onmouseover イベントと onmouseout イベントを使用して、マウスに基づいて画像ソースを動的に変更します。インタラクション。

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