HTML、CSS、JavaScript を使用してホバー時に画像ソース URL を変更する方法

マウスオーバー時の画像ソース URL の変更

問題:

ユーザーがタグの上にカーソルを置くと、タグが追加されます。

試行と問題:

CSS の content プロパティと :hover セレクターを使用した最初のアプローチは機能しませんでした。

解決策:

src 属性を CSS で直接指定することはできません。HTML、CSS、JavaScript を使用した 2 つの代替方法を次に示します。

方法 1: 背景画像を使用する

1. 置換
   でタグ付けします。
2. タグの背景画像を設定します。 CSS を使用してデフォルトの画像に変更します。
3. :hover セレクターを使用して、背景画像をホバー画像に更新します。

<div>
<pre class="brush:php;toolbar:false">#my-div:hover {
    background: url(hover-image.jpg);
}

方法 2: を使用するJavaScript

1. src を変更する JavaScript 関数を定義する
<img alt="HTML、CSS、JavaScript を使用してホバー時に画像ソース URL を変更する方法" > の onmouseover イベントに hover 関数を割り当て、onmouseout イベントに unhover 関数を割り当てます。タグ。

<img  alt="HTML、CSS、JavaScript を使用してホバー時に画像ソース URL を変更する方法" >

function hoverImage(element) {
    element.src = "hover-image.jpg";
}

function unhoverImage(element) {
    element.src = "default-image.jpg";
}