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

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

問題:

< のソース URL を動的に更新したいと考えています。画像>ユーザーがタグの上にカーソルを置くと、タグが追加されます。

試行と問題:

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

解決策:

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

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

1. 置換<画像> <div> でタグ付けします。

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

<div>

#my-div:hover {
    background: url(hover-image.jpg);
}

方法 2: を使用するJavaScript

1. src を変更する JavaScript 関数を定義する
<img> の onmouseover イベントに hover 関数を割り当て、onmouseout イベントに unhover 関数を割り当てます。タグ。

<img>

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

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

以上がHTML、CSS、JavaScript を使用してホバー時に画像ソース URL を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。