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 的 :hover 偽類的替代方法是可用的。舉例如下：

<div class="area"></div>
<div class="area"></div>
<img  src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="CSS 可以用來設定圖片地圖上滑鼠懸停效果的樣式嗎？" >

.area {
    background: #fff;
    display: block;
    height: [desired height];
    opacity: 0;
    position: absolute;
    width: [desired width];
}
.area:hover {
    opacity: 0.2;
}

說明：

• 圖片放置在底層。
• 兩個div元素絕對位於圖像頂部，不透明度為0.
• 當滑鼠懸停在這些div元素上時，不透明度增加到0.2，顯示它們後面的內容。

此方法提供了一種簡單而優雅的方式來添加滑鼠懸停效果使用 CSS 到圖像的特定區域。

以上是CSS 可以用來設定圖片地圖上滑鼠懸停效果的樣式嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！