[CSS]pointer-eventsプロパティですごい便利に!クリックやホバーのターゲットになる要素を変更するテクニック

CSSのプロパティ「pointer-events」は主に、要素のクリックイベントをキャンセルするために使用されます。しかし用途はそれだけではありません、

クリックやホバーなどで要素のスタイルを変更する際、通常その要素自身がトリガーでターゲットになりますが、「pointer-events」を使用すると、子要素をトリガーに定義できます。今まではJavaScriptを使用しないとこういったことは実装できませんでしたが、ピュアCSSで簡単に実装するテクニックを紹介します。

サイトのキャプチャ

Stuff you can do with CSS pointer events


pointer-eventsは、要素に対するホバーやクリックなどのマウスイベントをキャンセルできるプロパティです。初期値は「auto」で通常通りホバーやクリックのイベントを受け取りますが、「none」を指定するとイベントを受け取りません。

pointer-eventsのサポートブラウザは下記の通り。Opera Miniを除く、すべてのブラウザでサポートされています。

pointer-eventsのサポートブラウザ

pointer-eventsのサポートブラウザ

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

カードにホバーのスタイルを適用する際、カード全体をトリガーにするのではなく、子要素のボタンをトリガーにすることができます。

デモのアニメーション

HTMLは主要な箇所以外は、省略しています。
親要素となるカードのdiv要素には「.change-parent-style」を、トリガーのボタンには「.btn」を付与します。

CSSも主要な箇所以外は、省略しています。
親要素に「none」を定義してイベントをキャンセルし、子要素のボタンでイベントを受け取ります。

兄弟要素のスタイルを変更

ボタンをホバーすると、兄弟要素のカードのテキストを変更します。

デモのアニメーション

HTMLは主要な箇所以外は、省略しています。
兄弟要素のカードを内包するdiv要素に「.change-element-style」を付与します。

CSSも主要な箇所以外は、省略しています。
親要素にカードの兄弟要素を含むことで、兄弟要素でトリガーとターゲットを指定できます。

疑似要素をクリック可能に

疑似要素で実装した「x」だけをクリッカブルにします。

デモのアニメーション

HTMLは主要な箇所以外は、省略しています。

CSSも主要な箇所以外は、省略しています。
ボタン要素に「none」を定義してイベントをキャンセルし、疑似要素でイベントを受け取ります。

パスをクリック可能に

「pointer-events: visiblePainted;」を使用すると、SVGのパスをインタラクティブに利用できます。

デモのアニメーション

HTMLは主要な箇所以外は、省略しています。

CSSも主要な箇所以外は、省略しています。
pointer-eventsはSVGにも対応しており、塗りや線を定義することもできます。
参考: The ‘pointer-events’ property

オンラインデモ

下記のデモページで、実際の動作を確認できます。

sponsors

top of page

©2018 coliss