Bagaimanakah Saya Boleh Menggayakan Mouseovers pada Peta Imej dengan CSS?

Menggayakan Tetikus pada Peta Imej dengan CSS

Peta imej menyediakan cara yang mudah untuk mencipta kawasan yang boleh diklik dalam imej. Walau bagaimanapun, secara lalai, kawasan ini kekurangan maklum balas visual apabila dilayangkan. CSS menawarkan pilihan terhad untuk menggayakan alih tetikus pada peta imej, tetapi berikut ialah penyelesaian untuk menambah sentuhan interaktiviti yang halus:

Pendekatan:

Menggunakan :hover pada Divs atau Anchor Teg

• Buat teg div atau sauh telus yang diletakkan terus di atas yang boleh diklik kawasan.
• Tetapkan kelegapan elemen ini kepada 0 pada mulanya.
• Tambah penggayaan pada keadaan :hover unsur-unsur ini untuk menukar kelegapan elemen ini, mewujudkan hover yang boleh dilihat kesan.

Contoh:

<a>

.area {
  background: #fff;
  display: block;
  height: 475px;
  opacity: 0;
  position: absolute;
  width: 320px;
}
#area2 {
  left: 320px;
}
#area1:hover, #area2:hover {
  opacity: 0.2;
}

Dalam contoh ini, kelas .area mentakrifkan penggayaan untuk teg div atau anchor lutsinar. Peraturan :hover menukar kelegapan kepada 0.2 apabila menuding di atas kawasan boleh klik, memberikan kesan sorotan halus.

Nota: Pendekatan ini tidak dijamin berfungsi dalam semua penyemak imbas disebabkan oleh pengehadan CSS dalam penggayaan peta imej. Walau bagaimanapun, ia menyediakan penyelesaian yang agak mudah untuk menambahkan kesan tuding asas pada kawasan peta imej.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggayakan Mouseovers pada Peta Imej dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!