CSS を使用して画像マップ上のマウスオーバーのスタイルを設定するにはどうすればよいですか?

CSS を使用した画像マップ上のマウスオーバーのスタイル設定

画像マップは、画像内にクリック可能な領域を作成する便利な方法を提供します。ただし、デフォルトでは、これらの領域にマウスを移動したときの視覚的なフィードバックがありません。 CSS では、画像マップ上のマウスオーバーのスタイルを設定するためのオプションが限られていますが、インタラクティブ性の微妙なタッチを追加する解決策は次のとおりです:

アプローチ:

Div または Anchor で :hover を使用するタグ

• 透明な div タグまたはアンカー タグを作成し、その上に直接配置します。クリック可能な領域。
• 最初はこれらの要素の不透明度を 0 に設定します。
• これらの要素の :hover 状態にスタイルを追加して、不透明度を変更し、目に見えるホバーを作成します。 effect.

例:

<a></a>

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

この例では、.area クラスは透明な div タグまたはアンカー タグのスタイルを定義します。 :hover ルールは、クリック可能な領域上にマウスを移動すると不透明度を 0.2 に変更し、微妙なハイライト効果を提供します。

注: このアプローチは、制限があるため、すべてのブラウザーで動作することが保証されません。イメージマップのスタイリングにおける CSS の。ただし、画像マップ領域に基本的なホバー効果を追加するための比較的簡単なソリューションを提供します。

以上がCSS を使用して画像マップ上のマウスオーバーのスタイルを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。