Bootstrap をはじめとする CSS フレームワークや、自身で作成したボタンクラスを利用した際、後日、特定のボタンに対し見た目はそのままに、hover 効果はなくしたいケースがあります。
今回は CSS のボタンクラスに割り当てられた hover 効果を無効化する方法を説明したいと思います。
INDEX
目次
- Bootstrap 特定のリンクボタンの hover 効果を無効化する
- まとめ
Bootstrap 特定のリンクボタンの hover 効果を無効化する
CSS ボタンのイベント効果を無効化にするクラスを作成します。
CSS
[code]
.btn-ignore {
pointer-events: none;
}
[/code]
以下のような button1, button2 といったボタンがある場合を例にとると、btn-ignore クラスが追加されてある button2 は、マウスオーバー時にボタンの色や、マウスカーソルが変化する効果が無効化されます。
ただし、見た目の効果が無効化されるだけですので、ボタンにハイパーリンクが設定されている場合は、クリックすれば遷移してしまうので扱いには注意が必要です。
HTML
[code]
button1
button2
[/code]
まとめ
CSS の仕様をキャッチアップできていれば、今回のような問題もすぐ解決するのですが、Bootstrap 等に慣れてしまっていると、カスタマイズ時にどうしても躓いてしまいます。
今回のケースでは、ボタンクラスをボタン機能以外の用途で利用していますが、UX 上問題があるので、利用時にはページやアプリデザインを再度検討することも重要だと思います。
この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
