ポインタイベントプロパティを使用してCSSの特定の要素でホバー/マウスオーバーイベントを無視する方法

マウスオーバー/ホバーを削除/無視する方法を学ぶ（:hover ）pointer-eventsを使用した特定のHTML要素のイベント プロパティ。

最近、クライアントの1人のためにチームギャラリーページを作成しました。各ギャラリーアイテムは、マウスをその上に移動すると色が変わるオーバーレイを使用するUIカードで表されます。しかし、私は問題に遭遇し、それがこのチュートリアルに影響を与えました。

UIカードのコンテンツと構造

各ギャラリーカードアイテムは、次の要素で構成されています。

• 従業員の写真-白黒
• 従業員名-白
• 従業員の役割-白
• 微妙な暗い背景のオーバーレイ

ユーザーが各カードの上にマウスを移動すると、背景オーバーレイが明るい半透明の黄色（ブランドカラー）に変わります。

UIカードの例

このチュートリアルでは特定の問題の解決に焦点を当てたいので、ここに簡略化を示します。 UIカードの外観の（デザイン上の）バージョン。マウスをその上に移動して、背景色が明るい黄色に変化することを確認してください：

従業員名従業員の役割

しかし問題がある。あなたはすでにそれを見つけたかもしれません。テキスト領域の上にマウスを移動してみてください。問題がありますか？

マウスがテキスト要素領域上に移動するとすぐに、ホバーイベントはキャンセルされます —そしてすぐに黄色からデフォルトの非アクティブ状態に戻り、灰色になります。受け入れられません！

HTMLコードは次のとおりです。

<div class="card">
  <div class="card-overlay"></div>
  <img
    class="card-image"
    src="/article/uploadfiles/202203/2022033109324298.jpg"
  />
  <div class="card-info">
    <div class="card-name">Employee Name</div>
    <div class="card-role">Employee Role</div>
  </div>
</div>

そしてCSS：

.card {
  max-width: 350px;
  position: relative;
}

.card-overlay {
  background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.5));
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: background-color 0.6s;
}

.card-overlay:hover {
  background-color: rgba(255, 204, 7, 0.5);
}

.card-image {
  max-width: 100%;
  display: block;
}

.card-info {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
}

.card-name,
.card-role {
  color: white;
  font-size: 1.5rem;
  line-height: 1.25;
  padding: 0.25rem;
}

.card-name {
  font-weight: bold;
}

では、テキスト領域の上にマウスを移動すると、ホバーイベントがキャンセルされるのはなぜですか？

HTMLのスタック順序のため。スタックの順序は通常、CSS z-indexによって制御されます。 財産。ただし、デフォルトのスタック順序があります 最初にCSSで直接対処しないと、これが発生します。

z-index スタック注文です CSSプロパティ。 z-indexが最も高い要素 値（数値）は他の要素の前に置かれます—それらのpositionを想定しています 値は同じです。デフォルトのz-index Webページ上のすべての要素の値はautoです 、これはゼロ0と同じです 。

つまり、両方とも絶対位置にある2つの要素があり、両方ともデフォルトのz-indexを持っているためです。 autoの （0）スタック順に他の前にあるのはどれですか（一方が勝つ必要があります）？

HTMLの最後にあるものが優先されます。

この場合、<div class="card-info"> 名前と役割のテキスト要素を含むコンテナは、card-overlayの後にあります 要素：

<div class="card">
  <div class="card-overlay"></div>
  <img
    class="card-image"
    src="/article/uploadfiles/202203/2022033109324298.jpg"
  />
  <div class="card-info">
    <div class="card-name">Employee Name</div>
    <div class="card-role">Employee Role</div>
  </div>
</div>

UIカードの例では、テキスト要素の上にマウスを移動するとすぐに、オーバーレイ要素にカーソルを合わせるのではなく、<class="card-info">にカーソルを合わせます。 :hoverを持たない要素 （疑似クラス）付属。 .cardのみ それがあります（CSSコードを参照してください）。

何ができますか？

<div class="card-overlay"></div>を物理的に移動した場合 下の要素 <div class="card-info>...</div> このような要素：

<div class="card">
  <img
    class="card-image"
    src="/article/uploadfiles/202203/2022033109324298.jpg"
  />
  <div class="card-info">
    <div class="card-name">Employee Name</div>
    <div class="card-role">Employee Role</div>
  </div>
  <div class="card-overlay"></div>
</div>

次に、スタックの順序が入れ替わり、これが発生します：

従業員名従業員の役割

これで、テキスト領域の上にマウスを移動してもオーバーレイ遷移が中断されなくなりました（試してみてください）。

しかし、待ってください...スタックの順序が入れ替わったので、テキスト要素はオーバーレイによってグレー表示されます。オーバーレイは、オーバーレイの前/上にあります。

別の問題を作成しながら問題を解決しました。

しない そのアプローチを使用して、<div class="card-overlay">を移動します 要素を元の位置に戻します。

代わりに.card-overlayを指定するとどうなりますか クラスaz-index 1の値 ？

今度はcard-overlay card-infoの前に配置されます （まだz-index: 0があります ）スタック順序が高いため（z-index: 1 ）そして、ホバーイベントでの色の変更は、中断されることなく再び機能します—これは素晴らしいことですが、...

残念ながら、これを行うと、<div class="card-overlay">を物理的に移動したときとまったく同じ結果になります。 <div class="card-info">の下の要素 エレメント。今回は、CSSを使用して直接スタック順序を変更しました。テキスト要素はまだ オーバーレイによってグレー表示されます。

これは受け入れられません！

救助へのポインターイベント！

CSSにはpointer-eventsというプロパティがあることを突然思い出しました。 これにより、要素を反応するかどうかを決定できます。 ポインタイベントへ。

ポインタイベント クリック、スクロール、要素の上にマウスを移動（ホバー）するなど、マウスに関係するすべてのものです。

だから私は単にpointer-events: none;を追加しました 私の.card-infoに 彼のようなクラス：

.card-info {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  pointer-events: none; /* the fix! */
}

これで、ホバーイベントをキャンセルせずに、テキストを含むUIカード全体にホバーできます。テキスト要素は100％白色のままです：

従業員名従業員の役割

コードCodePenをチェックしてください。