【CSS】ボックス全体のリンク、pointer-eventsプロパティでクリックやホバーのターゲットを変更する方法など

リンクやボタンコンポーネントのCSSを設定する際に比較的利用頻度が高いと思われるケースについて、いくつかサンプルを使いながら解説します。

ボックス全体をリンクさせる

ボックスのアイテムがあり、その子要素にaタグが含まれるパターンを想定します。

子要素であるaタグの疑似要素（以下はbefore擬似要素）をボックス全体に広げ、ボックス自体をクリック可能にする方法です。

pointer-eventsプロパティの使用例

pointer-events: noneを設定すると、設定した要素のクリックイベントをキャンセルすることができます。

クリック要素に重なった要素のeventを無効にする

以下のサンプルは、ボタン要素に重なった吹き出し部分にpointer-events: noneを指定することでホバーまたはクリックで反応しないように設定し、ボタンの矩形部分のみをクリック可能にする方法です。

aタグホバー時に親要素のスタイルを変更

pointer-eventsのその他の使用例です。子要素のリンクやボタンをトリガーとし、子要素のマウス操作で親要素のスタイルを変化させる方法を紹介します。

親要素である.cardにpointrer-events: noneを設定し、子要素の.linkにpointer-eventes: autoを明示することで子要素aがリンクのトリガーとなります。（autoはデフォルト設定）

その結果、子要素の:hoverによって親要素の背景色を変更できるようになっています。