CSS3: hover 要素のマウスイベントを無効にする

UI デザイン上、ボタン自体は表示させるが、押せないようにしたい、hover エフェクトやポインターは無反応にしたい、といったケースがあると思いますが、そういった場合は、JavaScript を書くまでもなく、CSS のみで解決します。
今回は CSS でマウスイベントを無効にする方法をメモしておきます。

目次

• hover 要素のマウスイベントを無効にする
• まとめ

hover 要素のマウスイベントを無効にする

pointer-events というプロパティがありますので、これを none にします。（デフォルトは auto）

[code]
.btn-disabled {
pointer-events: none;
}
[/code]

まとめ

今回説明したケース以外でも、親要素に hover やクリックイベントが効いていて、内包される子要素のボタンがクリックできない問題も、親要素に pointer-events: none; を適用することで解決します。
pointer-events は、Opera Mini を除くすべてのブラウザでサポートされているので、実際に利用してもほぼ問題ないと思います。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。