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 < img> 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 < img> teg dengan <div> tag.
2. Tetapkan imej latar belakang <div> kepada imej lalai menggunakan CSS.
3. Gunakan pemilih :hover untuk mengemas kini imej latar belakang kepada imej tuding.

<div>

#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> tag.

   <img>

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

   Atas ialah kandungan terperinci Bagaimana untuk Mengubah URL Sumber Imej pada Hover Menggunakan HTML, CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!