ホバー時に HTML エリアタグのスタイルを設定するにはどうすればよいですか?

HTML エリア タグ上にカーソルを置く

HTML エリア タグ上にカーソルを置くには、:hover 疑似クラスを使用できます。この疑似クラスを使用すると、ユーザーが要素の上にマウスを置いたときに適用されるスタイルを指定できます。

ここでは、:hover 疑似クラスを使用して領域の境界線の色を変更する方法の例を示します。ユーザーがマウスを上に置くとタグ:

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

この CSS は、ユーザーがマウスを上に置くとエリア タグの境界線の色を黒に変更します。

追加情報

• エリアタグは、画像上のクリック可能な領域を定義するために使用されます。
• :hover 擬似クラスは、ユーザーが要素の上にマウスを移動したときに適用されるスタイルを指定するために使用されます。
• 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 中国語 Web サイトの他の関連記事を参照してください。