web-dev-qa-db-ja.com

CSSはホバー効果を無効にします

DOM全体の特定のボタン（すべてのボタンではなく）でマウスホバーを無効にする必要があります。 CSSクラスを使用してそれを達成する方法を教えてください。

ボタンが無効になっている場合、以下のCSSクラスを使用しています。今、私は同じクラスを使用してホバー効果を削除したい。

.buttonDisabled
 {
 Cursor:text !important; Text-Decoration: None !important; 
 }

上記のクラスは、マウスオーバーで手のサインとテキストの下線を削除します。今、私もホバー効果を削除したいです。私にお知らせください。

csshover
25
user2681868

これには本当に簡単な解決策があります。

新しいクラスを作成するだけです

.noHover{
    pointer-events: none;
}

これを使用して、イベントを無効にします。次のように使用します：

<a href='' class='btn noHover'>You cant touch ME :P</a>
67
Seetpal singh

無効なボタンにホバー効果を追加するには、以下を追加します

   .buttonDisabled:hover
     {
       /*your code goes here*/
     }
6
Abu Mohammad Rasel

：not selector：を使用してこれを実現できます。

HTMLコード：

<a class="button">Click me</a>
<a class="button disable">Click me</a>

CSSコード（scssを使用）：

.button {
  background-color: red;
  &:not(.disable):hover {
    /* apply hover effect here */
  }   
}

このようにして、指定されたクラス（.disable）が適用されないときにホバーエフェクトスタイルを適用します。

3
Simone Colnaghi

ホバー効果を無効にするために、2つの提案があります。

  • ホバー効果がJavaScriptによってトリガーされる場合は、$.unbind('hover');を使用します
  • ホバースタイルがクラスによってトリガーされる場合は、$.removeClass('hoverCssClass');を使用します

CSS !importantを使用してCSSをオーバーライドすると、CSSが非常に不鮮明になるため、この方法はお勧めしません。同じスタイルを維持するために、異なるクラス名のCSSスタイルをいつでも複製できます。

3
infiniteloop

あなたの質問から理解できるのは、削除したいボタンにホバー効果が既にあるということです。そのためには、ホバー効果を引き起こすCSSを削除するか、オーバーライドします。

オーバーライドするには、これを行います

.buttonDisabled:hover
{
    //overriding css goes here
}

たとえば、ホバー時にボタンの背景色が赤から青に変わる場合。オーバーライドするcssでは、変更しないように赤で表示します。

また、CSSの記述とオーバーライドのすべてのルールを実行します。どのcssがどの優先順位を持っているかをよく理解してください。

幸運を祈ります。

2
shinobi

ホバー効果を解除する方法は次のとおりです。

.table-hover > tbody > tr.hidden-table:hover > td {
    background-color: unset !important;
    color: unset !important;
}
0
Pawan Kumar