Bagaimana untuk Mengubah URL Sumber Imej pada Hover Menggunakan HTML, CSS dan JavaScript?

Menukar URL Sumber Imej pada Tuding

Masalah:

Anda mahu mengemas kini URL sumber secara dinamik teg apabila pengguna menuding di atasnya.

Percubaan dan Isu:

Pendekatan awal anda menggunakan sifat kandungan CSS dan pemilih :hover tidak berfungsi.

Penyelesaian:

Semasa menukar atribut src secara langsung dengan CSS tidak mungkin, berikut adalah dua kaedah alternatif menggunakan HTML, CSS dan JavaScript:

Kaedah 1: Menggunakan Imej Latar Belakang

1. Ganti teg dengan
   tag.
2. Tetapkan imej latar belakang
   kepada imej lalai menggunakan CSS.
3. Gunakan pemilih :hover untuk mengemas kini imej latar belakang kepada imej tuding.

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

Kaedah 2: Menggunakan JavaScript

1. Tentukan fungsi JavaScript untuk menukar atribut src pada hover dan unhover.
2. Tetapkan fungsi tuding pada acara onmouseover dan fungsi unhover kepada acara onmouseout bagi <img alt="Bagaimana untuk Mengubah URL Sumber Imej pada Hover Menggunakan HTML, CSS dan JavaScript?" > tag.

<img  alt="Bagaimana untuk Mengubah URL Sumber Imej pada Hover Menggunakan HTML, CSS dan JavaScript?" >

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

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