HTML、CSS、JavaScript を使用してホバー時に画像ソースを変更するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Patricia Arquette

リリース： 2024-12-23 00:24:10

オリジナル

631 人が閲覧しました

How Can I Change an Image Source on Hover Using HTML, CSS, and JavaScript?

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

<img> のソース 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> のソースを動的に設定できます。マウスオーバーとマウスアウトのタグ:

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>

ログイン後にコピー

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