CSS3: Bootstrap 特定のリンクボタンの hover 効果を無効化する

Bootstrap をはじめとする CSS フレームワークや、自身で作成したボタンクラスを利用した際、後日、特定のボタンに対し見た目はそのままに、hover 効果はなくしたいケースがあります。
今回は CSS のボタンクラスに割り当てられた hover 効果を無効化する方法を説明したいと思います。

目次

  • Bootstrap 特定のリンクボタンの hover 効果を無効化する
  • まとめ

Bootstrap 特定のリンクボタンの hover 効果を無効化する

CSS ボタンのイベント効果を無効化にするクラスを作成します。

CSS

.btn-ignore {
  pointer-events: none;
}

以下のような button1, button2 といったボタンがある場合を例にとると、btn-ignore クラスが追加されてある button2 は、マウスオーバー時にボタンの色や、マウスカーソルが変化する効果が無効化されます。

ただし、見た目の効果が無効化されるだけですので、ボタンにハイパーリンクが設定されている場合は、クリックすれば遷移してしまうので扱いには注意が必要です。

HTML

<a class="btn btn-primary">button1</a>
<a class="btn btn-primary btn-ignore">button2</a>

まとめ

CSS の仕様をキャッチアップできていれば、今回のような問題もすぐ解決するのですが、Bootstrap 等に慣れてしまっていると、カスタマイズ時にどうしても躓いてしまいます。

今回のケースでは、ボタンクラスをボタン機能以外の用途で利用していますが、UX 上問題があるので、利用時にはページやアプリデザインを再度検討することも重要だと思います。

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

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents