Bagaimanakah Saya Boleh Menggayakan Teg Kawasan HTML pada Hover?

Melayang pada Teg Kawasan HTML

Untuk menuding pada teg kawasan HTML, anda boleh menggunakan :hover pseudo-class. Kelas pseudo ini membolehkan anda menentukan gaya yang akan digunakan apabila pengguna menuding pada elemen.

Berikut ialah contoh cara anda boleh menggunakan kelas pseudo :hover untuk menukar warna sempadan sesuatu kawasan teg apabila pengguna menuding di atasnya:

area:hover {
  border: 1px solid black;
}

CSS ini akan menukar warna sempadan mana-mana teg kawasan kepada hitam apabila pengguna menuding ke atas ia.

Maklumat Tambahan

• Teg kawasan digunakan untuk mentakrifkan kawasan yang boleh diklik pada imej.
• Pseudo :hover- kelas digunakan untuk menentukan gaya yang akan digunakan apabila pengguna menuding pada elemen.
• Sifat sempadan digunakan untuk nyatakan lebar, gaya dan warna jidar elemen.

Contoh

Kod berikut menunjukkan contoh cara menggunakan teg kawasan dan :hover pseudo-class untuk mencipta imej boleh klik dengan sempadan hitam apabila pengguna melayang di atasnya:

<img  src="/static/imghwm/default1.png" data-src="my-image.jpg" class="lazy" usemap="#my-image-map" alt="Bagaimanakah Saya Boleh Menggayakan Teg Kawasan HTML pada Hover?" >

<map name="my-image-map">
  <area shape="rect" coords="0, 0, 100, 100" href="my-link.html" alt="My Link">
</map>

<style>
  area:hover {
    border: 1px solid black;
  }
</style>

Dalam ini contoh, teg kawasan mentakrifkan kawasan boleh klik pada imej dengan ID imej saya. Apabila pengguna melayang di atas imej, kelas pseudo :hover akan menukar warna sempadan kawasan itu kepada hitam.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggayakan Teg Kawasan HTML pada Hover?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!