Bolehkah Anda Menggayakan Mouseover Peta Imej dengan CSS Tulen?

Bolehkah Mouseover pada Peta Imej Digayakan dengan CSS?

Menggunakan peta imej, anda boleh membuat pautan pada imej. Tetapi bolehkah anda menggunakan gaya pada kawasan ini apabila pengguna menuding di atasnya?

Percubaan dan Masalah Kod

Coretan kod berikut telah dicuba, tetapi tidak berjaya:

<img src="{main_photo}" alt="locations map" usemap="#location-map" />
<map name="location-map">
  <area shape="rect" coords="208,230,290,245" href="{site_url}locations/grand_bay_al" />
  <area shape="rect" coords="307,214,364,226" href="{site_url}locations/mobile_al" />
  <area shape="rect" coords="317,276,375,290" href="{site_url}locations/loxley_al" />
</map>

area { border: 1px solid #d5d5d5; }

Penyelesaian CSS Sahaja

Semasa menggunakan peta imej, anda boleh menggunakan gaya :tuding pada elemen yang diletakkan di atas imej. Ini memudahkan proses, menghapuskan keperluan untuk jQuery:

• Letakkan imej di bahagian bawah.
• Tambahkan dua blok penambat (<a>) dengan kedudukan mutlak dan kelegapan ditetapkan kepada 0.
• Pada tuding, tetapkan kelegapan kepada 0.2.

Contoh Kod

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

<a>

Atas ialah kandungan terperinci Bolehkah Anda Menggayakan Mouseover Peta Imej dengan CSS Tulen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!