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

做这个Html，CSS就在head标签里。只需创建一个新类并在 css 中使用此代码片段：

pointer-events:none;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .buttonDisabled {
        pointer-events: none;
      }
    </style>
  </head>
  <body>
    <button class="buttonDisabled">Not-a-button</button>
  </body>
</html>

Answer 5

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

对于覆盖，请执行此操作

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

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

还要完成所有写入和覆盖CSS的规则。熟悉css会有什么优先权。

祝你好运。

Answer 6

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

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 7

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

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

Answer 8

我尝试了以下方法，对我来说效果更好

代码：

.unstyled-link{ 
  color: inherit;
  text-decoration: inherit;
  &:link,
  &:hover {
    color: inherit;
    text-decoration: inherit;
  }
}

Answer 9

  .buttonDisabled{
     background-color: unset !important;
    color: unset !important;
}

Answer 10

其他解决方案对我不起作用。

我只是改变了这个

.home_page_category_links {
  color:#eb4746;
}

为此：

.home_page_category_links, .home_page_category_links:hover {
  color:#eb4746;
}

这意味着应用于该类元素的相同样式在悬停时也应用于该类元素。

额外注意：如果您保持颜色相同，也许您还想避免任何下划线，如果是这样，也只需包含 text-decoration: none; （或 text-decoration: none !important; 如果使用引导程序）。

CSS禁用悬停效果

10 个答案: