要素から '：hover' CSS動作を削除します

142

要素にカーソルを合わせると書式が変更されるCSSがあります。

HTML：

<div class="test"> blah </div>

CSS：

.test:hover {  border: 1px solid red; }

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

それで私は質問に行きました：要素から「ホバー」のCSSスタイルを削除する方法はありますか？

html css

— dev.e.loper
ソース

44

2つのクラスを使用します。テストクラスを保持し、ホバーしたいものにのみ追加するtesthoverという2番目のクラスをテストクラスと一緒に追加します。これはあなたが直接求めたものではありませんが、より多くのコンテキストがなければ、それは最良のソリューションのように感じられ、おそらくそれを行うための最もクリーンで最も簡単な方法です。

例：

.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>

スニペットを展開

— ビスケットスタック
ソース

277

これを行う1つの方法は、以下を追加することです。

pointer-events:none;

ホバーを無効にする要素に。

（注：これにより、その要素のjavascriptイベントも無効になります。クリックイベントは実際には要素の後ろに落ちます）。

ブラウザのサポート（2019年8月22日時点で97.04％）

これははるかにきれいなようです

/**
* This allows you to disable hover events for any elements
*/
.disabled {
  pointer-events: none;  /**<-----------*/
  opacity: 0.2;
}

.button {
  border-radius: 30px;
  padding: 10px 15px;
  border: 2px solid #000;
  color: #FFF;
  background: #2D2D2D;
  text-shadow: 1px 1px 0px #000;
  cursor: pointer;
  display: inline-block;
  margin: 10px;
}

.button-red:hover {
  background: red;
}

.button-green:hover {
  background:green;  
}

<div class="button button-red">Im a red button hover over me</div>

<br/>

<div class="button button-green">Im a green button hover over me</div>

<br/>

<div class="button button-red disabled">Im a disabled red button</div>

<br/>

<div class="button button-green disabled">Im a disabled green button</div>

スニペットを展開

— ボドマン
ソース

4

正解です。IE<11ではサポートされていないため、問題はそれほど多くありません。

— Olivier-interfaSys

2

この答えは非常に簡潔で、まさに私が探していたものです。以前に使ったことがありますが、まだ新しいので、よく忘れてしまいます。

— nicorellius

2

まさに私が完璧に必要なもの：D

— Alizoh

5

ポインターイベントへの賛成投票なし。これが私が探していたものです。

— Garavani

2

@Bodmanポインターイベント：なし。ホバー時の背景の変更を削除しましたが、要素からハイパーリンクを無効にしました。ホバー効果を削除してハイパーリンクを保持する方法は？

— BioDeveloper 2017

230

:not疑似クラスを使用して、ホバーを適用したくないクラスを除外します。

FIDDLE

<div class="test"> blah </div>
<div class="test"> blah </div>
<div class="test nohover"> blah </div>

.test:not(.nohover):hover {  
    border: 1px solid red; 
}

これはあなたが1つのCSSルールであなたが望むことをします！

— ダニエル
ソース

6

間違いなく最高の解決策！コードが少なく、すべてのブラウザで適切に動作します。

— Ben Besuijen、2015

これでうまくいきましたが、の前のスペースを1つ変更する必要がありました:hover。これは、私がSASSを使用しているためか、わかりません。

— nurdyguy 2016年

2

おかげで、これを使用して、touchDeviceクラスに追加bodyし、CSSルールを次のようなものに変更することで、アプリ内のタッチデバイスのカスタムボタンのホバー効果を無効にしましたbody:not(.touchDevice) .button:hover { ... }

— Alexander

1

うん、その解決策ははるかに優れています。

— Tsurule Vol

2

新しい.cssクラスを追加します。

#test.nohover:hover { border: 0 }

そして

<div id="test" class="nohover">blah</div>

より「特定の」CSSルールが優先されるため、このborder：0バージョンは、他の場所で指定された一般的なバージョンをオーバーライドします。

— マークB
ソース

そうなる。また、デフォルトの外観も異なりますが、これは異なります。したがって、ホバーが表示されるブラウザーは常に存在します。

— maaartinus

1

私もこの問題を抱えていましたが、私の解決策は、ホバー効果を望まない要素の上に要素を置くことでした：

.no-hover {
  position: relative;
  opacity: 0.65 !important;
  display: inline-block;
}

.no-hover::before {
  content: '';
  background-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 60;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<button class="btn btn-primary">hover</button>
<span class="no-hover">
  <button class="btn btn-primary ">no hover</button>
</span>

スニペットを展開

— 茎フロリン
ソース

1

興味深い解決策。

— ボドマン

-2

セレクターを保持したいので、セレクターの追加/削除は機能しません。ハードで高速なCSSセレクター（または2つ）を作成する代わりに、元のセレクターを使用して、何らかの基準に基づいてその要素に新しいCSSルールを適用できます。

$(".test").hover(
  if(some evaluation) {
    $(this).css('border':0);
  }
);

— Buley
ソース