ページ内目次

pointer-eventsでマウスイベントを無効化する

マウスオーバー時に背景色を変化させたり、下線を表示したりすることはよくあります。

マウスオーバーで行単位でハイライトするテーブル(表)などもよく見かけます。

ところが、途中に注釈行が入っている場合など、その行はハイライトする必要がありません。また、行結合している場合などもちょっとおかしな動きになってしまいます。

そんなときに、マウスイベントを無効化するという方法があります。

.eventnone { 
pointer-events: none; 
}

これだけです。

デフォルトは、autoになっていますので、それをnoneにするだけです。

これでマウスオーバーしても変化しません。

 

PCとスマホでイベントを変えたい場合や、ショッピングサイトで「売り切れになるとクリックできない」なんてことにも使えますね♬

 

↑上へまいりま〜す