CSS禁用悬停效果

Question

我需要禁用鼠标悬停在整个DOM中的特定按钮（而不是所有按钮）上。请让我知道如何使用CSS类实现它。

我的按钮被禁用时，我正在使用下面的CSS类。现在我想删除使用相同类的悬停效果。

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

上面的类将负责删除鼠标悬停时的手势和文本下划线。现在我想删除悬停效果。请告诉我。

Answer 1

我有一个非常简单的解决方案。

只需创建一个新类

.noHover{
    pointer-events: none;
}

并使用它来禁用它上面的任何事件。使用它像：

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

Answer 2

添加以下内容以在禁用按钮上添加悬停效果

   .buttonDisabled:hover
     {
       /*your code goes here*/
     }

Answer 3

要禁用悬停效果，我有两个建议：

• 如果您的悬停效果是由JavaScript触发的，请使用$.unbind('hover');
• 如果您的悬停样式是由类触发的，那么只需使用$.removeClass('hoverCssClass');

使用CSS !important覆盖CSS将使您的CSS非常不干净，因此不建议使用该方法。您始终可以复制具有不同类名的CSS样式以保持相同的样式。

Answer 4

你可以使用：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）时应用悬停效果样式。

Answer 5

从您的问题我可以理解的是，您已经对要删除的按钮有一些悬停效果。为此，要么删除导致悬停效果的css或覆盖它。

为了覆盖，请执行此操作

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

例如，如果按钮的背景颜色在从红色悬停到蓝色时发生变化。在重写的CSS中，你将它变成红色，这样它就不会改变。

还要仔细阅读所有写作和覆盖CSS的规则。熟悉css会有什么优先权。

祝你好运。

Answer 6

这是取消悬停效果的方法。

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