如何在懸停時設定 HTML 區域標籤的樣式？

將滑鼠懸停在HTML 區域標記上

要將滑鼠懸停在HTML 區域標記上，可以使用:hover 偽類。此偽類可讓您指定當使用者將滑鼠懸停在元素上時將要套用的樣式。

以下範例說明如何使用:hover 偽類更改區域的邊框顏色當使用者將滑鼠懸停在其上時標記：

area:hover {
  border: 1px solid black;
}

當使用者將滑鼠懸停在任何區域標記上時，此CSS會將任何區域標記的邊框顏色變更為黑色

附加資訊

• 區域標籤用於定義影像上的可點擊區域。
• :hover 偽- class 用於指定當使用者將滑鼠懸停在元素上時將要套用的樣式。
• 使用 border 屬性指定元素邊框的寬度、樣式和顏色。

範例

以下程式碼顯示如何使用區域標籤和:hover 偽類，用於在使用者將滑鼠懸停時建立帶有黑色邊框的可點擊圖像it:

<img  src="/static/imghwm/default1.png" data-src="my-image.jpg" class="lazy" usemap="#my-image-map" alt="如何在懸停時設定 HTML 區域標籤的樣式？" >

<map name="my-image-map">
  <area shape="rect" coords="0, 0, 100, 100" href="my-link.html" alt="My Link">
</map>

<style>
  area:hover {
    border: 1px solid black;
  }
</style>

在此範例中，區域標籤定義了ID 為my-image的圖像上的可點擊區域。當使用者將滑鼠懸停在圖像上時，:hover 偽類會將區域的邊框顏色變更為黑色。

以上是如何在懸停時設定 HTML 區域標籤的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！