【CSS】hover時のcssは有効のまま、クリックイベントのみを無効化する

何をしたいか

• hover時のcssは利用したいけど、クリックイベント自体は無効化したい。

今回、めったにないケースだとは思うのですが、あるボタンのhover時のcss（今回は背景色を変える実装）だけは有効にしたまま、ユーザーがクリックできないようにしたいという特殊な実装をすることになりました。

解決策

解決法は:activeの擬似クラスを使ってその中でpointer-events: none;するだけ。

.class-name {
  &:hover {
    background-color: blue;
  }
  &:active {
    pointer-events: none;
  }
}

これでhover時はちゃんと背景が青になるものの、クリックをしても何も起こらないという動作をさせることができました。