[CSS] クリックは無効にしてマウスオーバーは有効にしたい

公開日:2019/02/18 更新日:2020/10/23

リンク文字列やボタンに対して、クリックはさせたくないけどマウスオーバーは有効にしたいというケースが（かなり限定的だと思いますが）あります
例えば「All-in-One Event Calendar」でカレンダーに表示したイベントに対して、クリックで詳細画面に遷移はさせたくないけど、マウスオーバー時の詳細表示は有効にしたい、みたいなケースです
一見ややこしい制御ですが、jQueryを使わずにCSSだけで簡単に実現することができます

サンプルコード

.only_mouseover:active {
    pointer-events: none;
}

「pointer-events」は基本的に有効か無効かの択一で、クリックだけ、マウスオーバーだけといった小分けの設定はできません
そこで「:active」セレクタを併用することでマウスオーバー時にだけイベントを有効にして、クリックした瞬間「pointer-events」を「none」状態に制御することができます

.only_click:hover {
    pointer-events: none;
}
.only_click:active {
    pointer-events: active;
}

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。