CSS 禁用悬停效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26754497/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS disable hover effect
提问by user2681868
I need to disable the mouse hover on a particular button(not on all buttons) in the entire DOM. Please let me know how to achieve it using a CSS class.
我需要禁用鼠标悬停在整个 DOM 中的特定按钮（不是所有按钮）上。请让我知道如何使用 CSS 类来实现它。
i am using the below CSS class when my button is disabled. now i want to remove the hover effect using the same class.
当我的按钮被禁用时，我正在使用下面的 CSS 类。现在我想使用相同的类删除悬停效果。
.buttonDisabled
{
Cursor:text !important; Text-Decoration: None !important;
}
The above class will take care of removing the hand sign and text underline on mouse over . Now i want to remove hover effect also. Please let me know.
上面的类将负责删除鼠标悬停时的手势和文本下划线。现在我也想删除悬停效果。请告诉我。
回答by Seetpal singh
I have really simple solution for this.
我有非常简单的解决方案。
just create a new class
只需创建一个新类
.noHover{
pointer-events: none;
}
and use this to disable any event on it. use it like:
并使用它来禁用其上的任何事件。像这样使用它：
<a href='' class='btn noHover'>You cant touch ME :P</a>
回答by Simone Colnaghi
You can achieve this using :not selector:
您可以使用 :not 选择器实现此目的：
HTML code:
HTML代码：
<a class="button">Click me</a>
<a class="button disable">Click me</a>
CSS code (using scss):
CSS 代码（使用 scss）：
.button {
background-color: red;
&:not(.disable):hover {
/* apply hover effect here */
}
}
In this way you apply the hover effect style when a specified class (.disable) is not applied.
通过这种方式，您可以在未应用指定类 (.disable) 时应用悬停效果样式。
回答by Rasel
Add the following to add hover effect on disabled button:
添加以下内容以在禁用按钮上添加悬停效果：
.buttonDisabled:hover
{
/*your code goes here*/
}
回答by Pawan Kumar
Here is way to to unset the hover effect.
这是取消悬停效果的方法。
.table-hover > tbody > tr.hidden-table:hover > td {
background-color: unset !important;
color: unset !important;
}
回答by infiniteloop
To disable the hover effect, I've got two suggestions:
要禁用悬停效果，我有两个建议：
- if your hover effect is triggered by JavaScript, just use
$.unbind('hover'); - if your hover style is triggered by class, then just use
$.removeClass('hoverCssClass');
- 如果您的悬停效果是由 JavaScript 触发的，只需使用
$.unbind('hover'); - 如果您的悬停样式是由类触发的，则只需使用
$.removeClass('hoverCssClass');
Using CSS !importantto override CSS will make your CSS very unclean thus that method is not recommended. You can always duplicate a CSS style with different class name to keep the same styling.
使用 CSS!important覆盖 CSS 会使您的 CSS 非常不干净，因此不推荐使用这种方法。您始终可以使用不同的类名复制 CSS 样式以保持相同的样式。
回答by shinobi
From your question all I can understand is that you already have some hover effect on your button which you want remove. For that either remove that css which causes the hover effect or override it.
从您的问题中，我所能理解的是，您已经对要删除的按钮产生了一些悬停效果。为此，要么删除导致悬停效果的 css，要么覆盖它。
For overriding, do this
对于覆盖，请执行此操作
.buttonDisabled:hover
{
//overriding css goes here
}
For example if your button's background color changes on hover from red to blue. In the overriding css you will make it as red so that it doesnt change.
例如，如果您的按钮的背景颜色在悬停时从红色变为蓝色。在覆盖的 css 中，您将把它设为红色，这样它就不会改变。
Also go through all the rules of writing and overriding css. Get familiar with what css will have what priority.
还要了解编写和覆盖 css 的所有规则。熟悉什么 css 会有什么优先级。
Best of luck.
祝你好运。
