[CSS]pointer-eventsプロパティですごい便利に！クリックやホバーのターゲットになる要素を変更するテクニック
Post on:2018年7月27日
sponsors
CSSのプロパティ「pointer-events」は主に、要素のクリックイベントをキャンセルするために使用されます。しかし用途はそれだけではありません、
クリックやホバーなどで要素のスタイルを変更する際、通常その要素自身がトリガーでターゲットになりますが、「pointer-events」を使用すると、子要素をトリガーに定義できます。今まではJavaScriptを使用しないとこういったことは実装できませんでしたが、ピュアCSSで簡単に実装するテクニックを紹介します。
Stuff you can do with CSS pointer events
pointer-eventsは、要素に対するホバーやクリックなどのマウスイベントをキャンセルできるプロパティです。初期値は「auto」で通常通りホバーやクリックのイベントを受け取りますが、「none」を指定するとイベントを受け取りません。
|
1 2 |
pointer-events: auto; pointer-events: none; |
pointer-eventsのサポートブラウザは下記の通り。Opera Miniを除く、すべてのブラウザでサポートされています。
ホバー時に親要素のスタイルを変更
カードにホバーのスタイルを適用する際、カード全体をトリガーにするのではなく、子要素のボタンをトリガーにすることができます。
HTMLは主要な箇所以外は、省略しています。
親要素となるカードのdiv要素には「.change-parent-style」を、トリガーのボタンには「.btn」を付与します。
|
1 2 3 4 5 6 7 8 |
<div class="card change-parent-style"> <img> <div class="card-body"> <h5>タイトル</h5> <p>テキスト</p> <button class="btn">Hover me</button> </div> </div> |
CSSも主要な箇所以外は、省略しています。
親要素に「none」を定義してイベントをキャンセルし、子要素のボタンでイベントを受け取ります。
|
1 2 3 4 5 6 7 8 9 10 11 |
.btn { pointer-events: auto; } .change-parent-style { pointer-events: none; transition: border-color 0.15s ease-in-out; } .change-parent-style:hover { border-color: #0069d9; } |
兄弟要素のスタイルを変更
ボタンをホバーすると、兄弟要素のカードのテキストを変更します。
HTMLは主要な箇所以外は、省略しています。
兄弟要素のカードを内包するdiv要素に「.change-element-style」を付与します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class="change-element-style"> <div class="card"> <img> <div class="card-body"> <h5>タイトル</h5> <button class="btn">Hover me</button> </div> </div> <div class="card"> <img> <div class="card-body"> <h5>タイトル</h5> <p class="card-text element">テキスト</p> </div> </div> </div> |
CSSも主要な箇所以外は、省略しています。
親要素にカードの兄弟要素を含むことで、兄弟要素でトリガーとターゲットを指定できます。
|
1 2 3 4 5 6 7 8 9 10 |
.btn { pointer-events: auto; } .change-element-style { pointer-events: none; } .change-element-style:hover .element { color: #28a745; } |
疑似要素をクリック可能に
疑似要素で実装した「x」だけをクリッカブルにします。
HTMLは主要な箇所以外は、省略しています。
|
1 |
<button class="btn-x">Filter</button> |
CSSも主要な箇所以外は、省略しています。
ボタン要素に「none」を定義してイベントをキャンセルし、疑似要素でイベントを受け取ります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.btn-x { pointer-events: none; font-weight: 700; border: none; background-color: #e8e8e8; border-radius: .2rem; padding: .5em .8em; cursor: pointer; } .btn-x::after { content: '×'; color: #dc3545; pointer-events: auto; } .btn-x:focus { box-shadow: rgba(0, 123, 255, 0.25) 0px 0px 0px 0.2rem; outline: 0; } |
パスをクリック可能に
「pointer-events: visiblePainted;」を使用すると、SVGのパスをインタラクティブに利用できます。
HTMLは主要な箇所以外は、省略しています。
|
1 |
<svg aria-hidden="true" width="384" height="512" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" class="img-fluid"><path fill="currentColor" d="M0 32l34.9 395.8L191.5 480l157.6-52.2L384 32H0zm308.2 127.9H124.4l4.1 49.4h175.6l-13.6 148.4-97.9 27v.3h-1.1l-98.7-27.3-6-75.8h47.7L138 320l53.5 14.5 53.7-14.5 6-62.2H84.3L71.5 112.2h241.1l-4.4 47.7z" class="svg"></path></svg> |
CSSも主要な箇所以外は、省略しています。
pointer-eventsはSVGにも対応しており、塗りや線を定義することもできます。
参考: The ‘pointer-events’ property
|
1 2 3 4 5 6 7 |
.svg { pointer-events: visiblePainted; transition: fill .15s ease-in-out; } .svg:hover { fill: #fd7e14; } |
オンラインデモ
下記のデモページで、実際の動作を確認できます。
See the Pen Stuff you can do with CSS pointer events by MartijnCuppens (@MartijnCuppens) on CodePen.
sponsors
