我需要在整个DOM中禁用特定按钮（而不是所有按钮）的鼠标悬停效果。请告诉我如何使用CSS类来实现它。
当我的按钮被禁用时，我正在使用以下CSS类。现在，我想使用相同的类别去除悬停效果。
.buttonDisabled
{
Cursor:text !important; Text-Decoration: None !important;
}
上述类将处理鼠标悬停时的手势和文本下划线。现在我也想删除悬停效果。请告诉我。
16个回答
286
我对这个问题有一个非常简单的解决方案。
只需创建一个新的类。
.noHover{
pointer-events: none;
}
使用此方法来禁用该元素上的任何事件。用法如下：
<a href='' class='btn noHover'>You cant touch ME :P</a>
- Seetpal singh
7
113这将禁用该元素上的所有事件，这意味着在这种情况下，所有按钮都无法点击。 - Shikatsu Kagaminara
6@Shikatsu Kagaminara，这只会禁用您应用类的元素的事件。我可能不理解您和其他25个人对此解决方案有何问题。
<div class ='hover noHover'>一些内容</div>不会影响仅具有hover类的任何其他元素。 - Altimus Prime2@AltimusPrime：问题在于该问题要求解决禁用鼠标悬停的方法。但是这种解决方案会禁用所有鼠标事件。因此，例如按钮甚至无法接收点击事件。 - shinobi
@shinobi OP 特别要求“当我的按钮被禁用时”，这意味着该按钮不应该可点击。否则，只需调整 CSS 悬停事件以匹配默认样式，这可能是您自己正在寻找的答案。 - Altimus Prime
1这并不能防止用户使用键盘:focus在锚点上。 - forkinspace
显示剩余2条评论
50
您可以使用: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)未应用时，使用此方法应用悬停效果样式。
- Simone Colnaghi
5
能否解释一下
&:not(.disable):hover？ - Gobliins3:not选择器用于对所有不具有括号中指定的类的元素应用样式。在本例中，我们正在指定对所有具有“button”类但没有“disable”类的元素悬停时的样式。希望现在清楚了 :) - Simone Colnaghi
1我认为他指的是“&”符号，这是 SCSS 而不是纯 CSS，它需要编译，但问题仅涉及 CSS 而非 SCSS，因此这个答案可能需要编辑。 - Tofandel
1他要的是CSS而不是SCSS。你只是让事情变得更复杂了。 - dotnethaggis
4这是关于IT的内容：按钮 {
背景颜色：红色；
}
.button:not(.disable):hover {
/* 在此应用悬停效果 */
} - Simone Colnaghi
17
这里有一种去除悬停效果的方法。
.table-hover > tbody > tr.hidden-table:hover > td {
background-color: unset !important;
color: unset !important;
}
- Pawan Kumar
2
我不认为建议使用!important指示符。我认为这仅保留用于特殊情况，而这里并不适用。 - Saturn K
2如果元素已经具有设置为
!important的属性，并且由于使用的库或框架而无法更改，则可以使用此方法。从问题中可以看出，该元素已经具有了!important，因此这是覆盖它的唯一方法。 - Tofandel16
因为我只想让这个特定元素不受悬停点击事件或样式的影响，而且它只是页面上其他类似按钮的指示部分之一，所以我最终使用了内联样式，并赋予它覆盖优先级。代码如下：
<button style="pointer-events:none"></button>
这使我在单个元素上删除了所有样式和JavaScript/JQuery功能，而不影响页面上的其他元素 :). 更多信息请参见 mozilla reference。
- Joel Youngberg
1
请注意，在这种情况下使用ID可能会更有帮助/适用。 - Joel Youngberg
8
要禁用悬停效果，我有两个建议：
- 如果您的悬停效果是由JavaScript触发的，请使用
$.unbind('hover'); - 如果您的悬停样式是由类触发的，则只需使用
$.removeClass('hoverCssClass');
使用CSS !important 来覆盖CSS会使您的CSS非常不干净，因此不建议使用该方法。您可以始终使用不同的类名复制CSS样式以保持相同的样式。
- infiniteloop
1
说实话，使用两种不同的语言比只使用一种语言甚至更糟糕！通过一些练习，有很多方法可以编写CSS而不必过多地使用!importend属性。 - Niels Lucas
7
在 head 标签中添加 Html 和 CSS。只需创建一个新类，在 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>
- John Snyder
1
1如果您仍然想要能够单击它呢？ - Chris Bordeman
6
从你的问题中，我理解到你已经在你的按钮上实现了一些悬停效果，而你想要去掉这些效果。为此，可以删除导致悬停效果的CSS或进行覆盖。
如果想进行覆盖，请按照以下步骤操作：
.buttonDisabled:hover
{
//overriding css goes here
}
例如，如果您的按钮在悬停时背景颜色从红色变为蓝色。在覆盖 CSS 中，您将使其为红色，以使其不更改。
此外，请仔细阅读编写和覆盖 CSS 的所有规则。了解哪些 CSS 将具有哪种优先级。
祝你好运。
- shinobi
5
在禁用的按钮上添加鼠标悬停效果，请添加以下内容：
.buttonDisabled:hover
{
/*your code goes here*/
}
- Rasel
2
15这并没有回答这个问题。 - DrLightman
@DrLightman，您可以在这里设置反向逻辑，以便悬停效果似乎没有任何作用。 - Rasel
5
使用transition: all 100s ease-in-out;来覆盖鼠标悬停时的更改。如果您不知道要替换的属性的原始值，这不是一种解决方案，而是一种变通方法。
- Sitaram Mulik
1
2
其他解决方案对我无效。
我只是改变了这个
.home_page_category_links {
color:#eb4746;
}
转换为：
.home_page_category_links, .home_page_category_links:hover {
color:#eb4746;
}
这意味着应用于该类元素的样式也会在鼠标悬停时应用于该类元素。
额外说明：如果您想保持颜色不变，也许您还想避免任何下划线，如果是这样，请同时包括text-decoration: none;（如果使用bootstrap，则为text-decoration: none !important;）。
- stevec
1
做这个对于文本来说没问题，但图像该怎么办呢？在我的情况下，当鼠标悬停时，我显示图像的亮色版本，并在未悬停时显示图像的变暗版本。我知道这不是最好的解决方案，我也尝试过使用线性图像，但没有得到我想要的结果。所以我的问题是，在我的移动屏幕上，我不想要悬停效果，所以我放置了同样的图像URL，但我想知道如果用户点击图像，浏览器是否会尝试重新加载同一URL，或者不执行任何任务。 - M NARESH
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接