on:2018年7月27日sponsorsCSSのプロパティ「pointer-events」は主に、要素のクリックイベントをキャンセルするために使用されます。用途はそれだけではありません、クリックやホバーなどで要素のスタイルを変更する際、通常その要素自身がトリガーでターゲットになりますが、「pointer-events」を使用すると、子要素をトリガーに定義できます。今まではJavaScriptを使用しないとこういったことは実装できませんでしたが、ピュアCSSで簡単に実装するテクニックを紹介します。eventspointer-eventsは、要素に対するホバーやクリックなどのマウスイベントをキャンセルできるプロパティです。初期値は「auto」で通常通りホバーやクリックのイベントを受け取りますが、「none」を指定するとイベントを受け取りません。none;pointer-eventsのサポートブラウザは下記の通り。Miniを除く、すべてのブラウザでサポートされています。pointer-eventsのサポートブラウザホバー時に親要素のスタイルを変更カードにホバーのスタイルを適用する際、カード全体をトリガーにするのではなく、子要素のボタンをトリガーにすることができます。HTMLは主要な箇所以外は、省略しています。親要素となるカードのdiv要素には「.change-parent-style」を、トリガーのボタンには「.btn」を付与します。me</button></div></div>CSSも主要な箇所以外は、省略しています。親要素に「none」を定義してイベントをキャンセルし、子要素のボタンでイベントを受け取ります。#0069d9;}兄弟要素のスタイルを変更ボタンをホバーすると、兄弟要素のカードのテキストを変更します。HTMLは主要な箇所以外は、省略しています。兄弟要素のカードを内包するdiv要素に「.change-element-style」を付与します。element">テキスト</p></div></div></div>CSSも主要な箇所以外は、省略しています。親要素にカードの兄弟要素を含むことで、兄弟要素でトリガーとターゲットを指定できます。#28a745;}疑似要素をクリック可能に疑似要素で実装した「x」だけをクリッカブルにします。HTMLは主要な箇所以外は、省略しています。class="btn-x">Filter</button>CSSも主要な箇所以外は、省略しています。ボタン要素に「none」を定義してイベントをキャンセルし、疑似要素でイベントを受け取ります。visiblePainted;」を使用すると、SVGのパスをインタラクティブに利用できます。HTMLは主要な箇所以外は、省略しています。class="svg"></path></svg>CSSも主要な箇所以外は、省略しています。pointer-eventsはSVGにも対応しており、塗りや線を定義することもできます。#fd7e14;}オンラインデモ下記のデモページで、実際の動作を確認できます。