Bagaimanakah Anda Boleh Mencapai Kesan Tetikus pada Peta Imej Menggunakan CSS?

Menggayakan Tetikus Peta Imej dengan CSS

Apabila membuat halaman web interaktif, selalunya perlu memasukkan imej dengan kawasan boleh klik. Biasanya, ini dicapai menggunakan peta imej. Walau bagaimanapun, menggayakan kawasan ini pada tetikus untuk menyediakan interaktiviti tambahan telah terbukti sukar difahami.

Pada masa lalu, percubaan untuk menggayakan kawasan ini menggunakan CSS telah menemui kejayaan yang terhad, seperti yang ditunjukkan oleh contoh yang disediakan:

<img src="/static/imghwm/default1.png" data-src="{main_photo}" class="lazy" alt="locations map" usemap="#location-map">
<map name="location-map">
    <area shape="rect" coords="208,230,290,245" href="%7Bsite_url%7Dlocations/grand_bay_al">
    <area shape="rect" coords="307,214,364,226" href="%7Bsite_url%7Dlocations/mobile_al">
    <area shape="rect" coords="317,276,375,290" href="%7Bsite_url%7Dlocations/loxley_al">
</map>

area { border: 1px solid #d5d5d5; }

Penyelesaian CSS Sahaja

Nasib baik, terdapat penyelesaian mudah menggunakan CSS sahaja:

<div class="area">
<pre class="brush:php;toolbar:false">.area {
    background: #fff;
    display: block;
    height: 475px;
    opacity: 0;
    position: absolute;
    width: 320px;
}
#area2 {
    left: 320px;
}
#area1:hover, #area2:hover {
    opacity: 0.2;
}

Dalam pendekatan ini, telus blok diletakkan di atas imej, setiap satu mewakili kawasan yang boleh diklik. Dengan menetapkan kelegapan kepada 0 secara lalai dan meningkatkannya kepada 0.2 pada tuding, kesan alih tetikus halus dicapai.