1. ホーム
  2. html

[解決済み] 要素から ':hover' CSS 動作を削除する

2022-04-28 16:34:25

質問

要素にカーソルを合わせると書式が変わるCSSがあるのですが、どうすればいいですか?

.test:hover { border: 1px solid red; }
<div class="test">blah</div>

場合によっては、ホバー時にCSSを適用したくないこともある。一つの方法は、jQueryを使用してdivからCSSクラスを削除することですが、そのクラスを子要素のフォーマットにも使用しているため、他のものを壊してしまうことになります。

ある要素から 'hover' CSS スタイルを削除する方法はありますか?

どのように解決するのですか?

私なら、2つのクラスを使います。test クラスはそのままにして、testhover という 2 つ目のクラスを test クラスと一緒に追加して、ホバーさせたいものだけに追加します。これは、あなたが尋ねたこととは直接関係ありませんが、より多くの文脈がなければ、これが最善の解決策のように感じられ、おそらく最もクリーンでシンプルな方法だと思います。

.test {  border: 0px; }
.testhover:hover {  border: 1px solid red; }
<div class="test"> blah </div>
<div class="test"> blah </div>
<div class="test testhover"> blah </div>