純粋な 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 が不要になります:

• 画像を一番下に配置します。
• 絶対位置と不透明度を に設定して 2 つのアンカー ブロック (<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 中国語 Web サイトの他の関連記事を参照してください。