您可以使用純 CSS 設計圖像地圖滑鼠懸停的樣式嗎？

圖片映射上的滑鼠懸停可以使用 CSS 設定樣式嗎？

使用圖像映射，您可以在圖像上建立連結。但是，當使用者將滑鼠懸停在這些區域上時，您可以將樣式套用到這些區域嗎？

程式碼嘗試和問題

嘗試了以下程式碼片段，但不成功：

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

純CSS 解決方案

使用圖像映射時，您可以將:hover 樣式套用至位於圖像頂部的元素。這簡化了流程，不再需要 jQuery：

• 將影像放在底部。
• 新增兩個錨點塊 (<a>)，絕對定位和不透明度設定為0.
• 懸停時，將不透明度設為 0.2。

程式碼範例

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

<a>

以上是您可以使用純 CSS 設計圖像地圖滑鼠懸停的樣式嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！