CSS 禁用悬停效果答案

【问题标题】：CSS disable hover effectCSS 禁用悬停效果
【发布时间】：2015-01-01 11:39:03
【问题描述】：

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

当我的按钮被禁用时，我正在使用下面的 CSS 类。现在我想使用同一个类来移除悬停效果。

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

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

【问题讨论】：

元素上设置了哪些属性？背景颜色？
你在说什么“悬停效果”？

标签： css hover

【解决方案1】：

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

创建一个新类

.noHover{
    pointer-events: none;
}

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

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

【讨论】：

这也禁用了元素上的所有类型的事件。在这种情况下，所有按钮都将无法点击。
@Shikatsu Kagaminara。这只会禁用您应用类的元素的事件。我可能不明白您和其他 25 个人对这个解决方案有什么问题。 <div class='hover noHover'>Some content</div> 不会影响只有 hover 类的任何其他元素。
我同意。这是当前用例中非常有用的属性。禁用的控件通常不是您希望用户与之交互的东西。任何表明用户可以与控件交互的迹象只会增加混乱。禁用所有指针事件是一个巧妙的技巧，它似乎得到了很好的支持。
@AltimusPrime ：问题是该问题要求提供禁用鼠标悬停的解决方案。但是这个解决方案会禁用所有鼠标事件。例如，按钮甚至不会接收点击事件。
@shinobi OP 专门要求“当我的按钮被禁用时”，这意味着该按钮不应该是可点击的。否则只需调整 css 悬停事件以匹配默认样式，这可能是您自己寻找的答案。

【解决方案2】：

您可以使用 :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) 时应用悬停效果样式。

【讨论】：

你能解释一下&:not(.disable):hover
:not 选择器用于将应用样式应用于所有没有在括号中指定类的元素。在这种情况下，我们在所有具有类“按钮”且没有类“禁用”的元素上指定悬停样式。希望现在很清楚:)
我认为他的意思是符号，这是 SCSS 而不是纯 CSS，它需要编译，但问题只是关于 CSS 而不是 SCSS，所以这个答案可以使用编辑
他要的是css而不是scss。你只是把事情复杂化了。
这里是 css... 按钮 { background-color: red; } .button:not(.disable):hover { /* 在这里应用悬停效果 */ }

【解决方案3】：

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

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

【讨论】：

我认为不建议使用 !important 指示符。我认为这只是为特殊情况保留的，这里不适用。
如果元素已经具有设置了!important 的属性并且由于使用的框架的lib 而您无法更改它，则此使用是有保证的。从问题中您可以看到该元素确实具有!important，因此这是覆盖它的唯一方法

【解决方案4】：

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

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

使用 CSS !important 覆盖 CSS 会使您的 CSS 非常不干净，因此不推荐使用这种方法。您始终可以使用不同的类名复制 CSS 样式以保持相同的样式。

【讨论】：

tbh，使用 2 种不同的语言比使用 1 和 !importend 更糟糕。通过一些练习，您可以通过多种方式编写 CSS，而无需使用 !importend 属性。

【解决方案5】：

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

要覆盖，请执行此操作

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

例如，如果您的按钮的背景颜色在悬停时从红色变为蓝色。在覆盖的 css 中，您会将其设为红色，这样它就不会改变。

还要了解编写和覆盖 css 的所有规则。熟悉什么 css 有什么优先级。

祝你好运。

【讨论】：

【解决方案6】：

执行这个 Html 并且 CSS 在 head 标签中。只需创建一个新类并在 css 中使用此代码 sn-p：

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>

【讨论】：

如果您仍然希望能够点击它怎么办？

【解决方案7】：

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

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

【讨论】：

这没有回答问题。
@DrLightman 你可以在这里设置逆逻辑，这样看起来悬停效果什么都不做

【解决方案8】：

为此，我最终使用了内联样式，因为我只希望一个特定元素没有任何悬停点击事件或样式，因为它只是关于页面上看起来像它的其他按钮的说明的一部分, 并赋予它覆盖优先级。这是什么：

<button style="pointer-events:none"></button>

这为我删除了单个元素上的所有样式和绑定 JavaScript/JQuery 功能，而不会影响页面上的其他元素 :)。有关详细信息，请参阅mozilla reference。

【讨论】：

请注意，在这种情况下使用 id 也可能会有所帮助/适当。

【解决方案9】：

使用transition: all 100s ease-in-out; 覆盖悬停更改。如果您不知道要替换的属性的原始值，这不是解决方案，而是一种解决方法。

【讨论】：

这没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker。 - From Review

【解决方案10】：

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

代码：

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

【讨论】：

【解决方案11】：

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

我只是改变了这个

.home_page_category_links {
  color:#eb4746;
}

到这里：

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

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

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

【讨论】：