HTML、CSS、JavaScript を使用してホバー時に画像ソースを変更するにはどうすればよいですか?

HTML、CSS、JavaScript を使用したカーソル上の画像ソースの変更

<img alt="HTML、CSS、JavaScript を使用してホバー時に画像ソースを変更するにはどうすればよいですか?" > のソース URL を変更するには

CSS-Only (Webkit-Specific)

CSS のみを使用して、画像を別の URL に置き換えることができます。ホバーします。ただし、これは Google Chrome などの Webkit ベースのブラウザでのみ機能します。

#my-img:hover {
    content: url('http://dummyimage.com/100x100/eb00eb/fff');
}

Div 背景画像の使用

代わりに、

を使用することもできます。ホバー時に背景画像が置き換えられる要素:

div {
    background: url('http://dummyimage.com/100x100/000/fff');
}
div:hover {
    background: url('http://dummyimage.com/100x100/eb00eb/fff');
}

JavaScript の使用

JavaScript を使用すると、<img alt="HTML、CSS、JavaScript を使用してホバー時に画像ソースを変更するにはどうすればよいですか?" > のソースを動的に設定できます。マウスオーバーとマウスアウトのタグ:

function hover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
}

function unhover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
}

<img  alt="HTML、CSS、JavaScript を使用してホバー時に画像ソースを変更するにはどうすればよいですか?" >

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