CSS を使用してイメージ マップ上のマウスオーバーのスタイルを設定できますか?

イメージ マップは、画像内のクリック可能な領域の輪郭を描くために使用されます。デフォルトでは単純な幾何学的形状として表示されるこれらの領域をスタイル設定すると、視覚的にインタラクティブなインターフェイスとして機能します。 Web サイトの美しさに不可欠なツールである CSS でこれが実現可能なのか疑問に思う人もいるかもしれません。 CSS はイメージ マップ領域を直接スタイル設定できませんが、目的の効果を達成するための賢い回避策があります。

CSS のみの解決策:

CSS 経由でイメージ マップを操作する代替案クリック可能な要素 ( ブロックなど) を画像上に重ね合わせます。これらの要素をマップ領域と正確に位置合わせして配置し、マウスオーバー時の不透明度調整とともに、イメージ マップ自体のスタイルを設定する視覚効果を模倣します。このアプローチにより、CSS の強力な機能をさらに活用して実装が簡素化されます。

例:

この例では、2 つの a ブロックが絶対的に配置され、最初は 0 の不透明度が与えられ、非表示になります。 。これらの領域の上にマウスを置くと、不透明度が 0.2 に設定され、微妙なオーバーレイ効果が現れます。画像は背景に残ります。