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

CSSのプロパティ「pointer-events」は主に、要素のクリックイベントをキャンセルするために使用されます。しかし用途はそれだけではありません、 クリックやホバーなどで要素のスタイルを変更する際、通常その要素自身がトリガーでターゲットになりますが、「pointer-events」を使用すると、子要素をトリガーに定義できます。今まではJavaScriptを使用しないとこういったことは実装できませんでしたが、ピュアCSSで簡単に実装するテクニックを紹介します。 Stuff you can do with CSS pointer events pointer-eventsは、要素に対するホバーやクリックなどのマウスイベントをキャンセルできるプロパティです。初期値は「auto」で通常通りホバーやクリックのイベントを受け取りますが、「none」を指定するとイベントを受け取りません。

[coliss]

pointer-eventsプロパティを使ったテクニック、ここから更にアイデアを膨らませることができそう

[yudukikun5120]

“pointer-events: visiblePainted;”

[gt-r-blaze]

pointer-events: none;

[willnet]

bootstrapの.disabledがこれつかってた

[kathew]

noneを指定する以外にもこんな使いみちが‥‥！親にnoneして子をautoにしても子が親のnoneに引っ張られたりしないのね。素晴らしい。SVGのくだりはワクワクした

[chlono]

こんなことできるのか

[jj1hgp]

今度使ってみる

[utisam]

カード全体をhoverできるの良い。

[lemarc]

擬似要素だけクリッカブルになるのか

[AmaiSaeta]

擬似要素の奴はアクセサビリティ的にもボタンにしろよとは思うものの、他はいろいろ応用が効きそう。

[wdr_s]

知らなかった。CSSでここまでやっちゃうのってどうかとは思うけど

[kvx]

ほおおお。これはいいこと聞いた。