CSS禁用悬停效果


CSS disable hover effect

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

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

1
2
3
4
.buttonDisabled
 {
 Cursor:text !important; Text-Decoration: None !important;
 }

上面的课将消除鼠标悬停时的手势和文字下划线。 现在我也想删除悬停效果。 请告诉我。

相关讨论

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

只是创建一个新类

1
2
3
.noHover{
    pointer-events: none;
}

并使用它禁用任何事件。像这样使用它：

1
You cant touch ME :P
相关讨论

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

1
2
3
4
   .buttonDisabled:hover
     {
       /*your code goes here*/
     }

您可以使用：not选择器来实现：

HTML代码：

1
2
Click me
Click me

CSS代码(使用scss)：

1
2
3
4
5
6
.button {
  background-color: red;
  &:not(.disable):hover {
    /* apply hover effect here */
  }  
}

这样，您可以在未应用指定的类(.disable)时应用悬停效果样式。

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

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

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

相关讨论

从您的问题中，我能理解的是您已经对要删除的按钮产生了一些悬停效果。
为此，请删除导致悬停效果的css或将其覆盖。

对于覆盖，请执行此操作

1
2
3
4
.buttonDisabled:hover
{
    //overriding css goes here
}

例如，如果您的按钮的背景颜色在悬停时从红色变为蓝色。在覆盖的CSS中，您将其设置为红色，以便它不会更改。

还应遵循所有编写和覆盖CSS的规则。熟悉什么CSS将具有什么优先级。

祝你好运。

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

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