如何使用 CSS 在圖像地圖上實現滑鼠懸停效果？

使用 CSS 設定圖片滑鼠懸停樣式

建立互動式網頁時，通常需要包含具有可點擊區域的圖片。通常，這是使用圖像映射來實現的。然而，事實證明，在滑鼠懸停時對這些區域進行樣式設定以提供額外的互動性是難以實現的。

過去，嘗試使用CSS 對這些區域進行樣式設定的成功有限，如提供的範例所示：

<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; }

僅CSS 解決方案

幸運的是，有一個僅使用CSS 的簡單解決方法：

<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;
}

在這種方法中，透明塊被放置在圖像上，每個塊代表一個可點擊區域。透過將不透明度預設為 0 並在懸停時將其增加到 0.2，可以實現微妙的滑鼠懸停效果。