Html 我可以停止 :hover 应用于元素吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8315690/
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
Can I stop :hover from being applied to an element?
提问by T. Stone
Let's say I have some CSS...
假设我有一些 CSS ...
button:hover { font-weight: bold }
button:hover { font-weight: bold }
How can I prevent the :hoverstyles from being applied, at will? My target use case is when the element is disabled. For example, with this HTML...
如何防止随意:hover应用样式？我的目标用例是禁用元素时。例如，使用此 HTML...
<button disabled>Click me</button>
<button disabled>Click me</button>
...the :hoverCSS is still applied. The button gets faded out but the :hovereffect can still be seen. How can this be stopped?
... :hoverCSS 仍然适用。按钮淡出，但:hover效果仍然可以看到。这怎么能阻止？
回答by CodeToad
pointer-events: none will disable all hover behavior. very usefull for disabled elements
pointer-events: none 将禁用所有悬停行为。对禁用元素非常有用
button[disabled] {
pointer-events: none;
}
回答by Jason McCreary
I don't think there is a way to truly ignorea set of styles.
我认为没有办法真正忽略一组样式。
You could, however, create a more specific style that overrides the hoverstyles.
但是，您可以创建更具体的样式来覆盖hover样式。
button[disabled]:hover {
/* turn off button hover styles */
}
回答by joewoodward
I've just been struggling with this problem and came up with a solution using the css3 not selector. It's not supported by the older IE browsers but you can use selectivizr.js (or another) to add the functionality
我一直在努力解决这个问题，并想出了一个使用 css3 而不是选择器的解决方案。较旧的 IE 浏览器不支持它，但您可以使用 selectivizr.js（或其他）来添加功能
button {
// styles for non-disabled buttons
}
button:hover:not([disabled]) {
// styles for hover on non-disabled
}
button[disabled] {
cursor: default;
}
回答by Trevor Yearwood
After reading the responses available I found none of them would be suitable for me. I kept thinking there must be a simple solution to this. In the end I just chained the pseudo classes. This worked perfectly.
在阅读了可用的回复后，我发现没有一个适合我。我一直认为必须有一个简单的解决方案。最后我只是链接了伪类。这工作得很好。
button:enabled:hover { font-weight: bold }
Example:
例子：
.hov:hover { color: red }
.hov2:enabled:hover { color: green }<p>Without fix</p>
<button class="hov">Hover me</button>
<button class="hov" disabled>Hover me</button>
<p>With fix</p>
<button class="hov2">Hover me</button>
<button class="hov2" disabled>Hover me</button>Noticed I'm using if enabled pseudo code (:) and the hover pseudo code (:) code to perform the css.
注意到我正在使用 if enabled 伪代码 (:) 和悬停伪代码 (:) 代码来执行 css。
I appreciated it's some time since this thread was opened, but thought it might help others.
我很感激自从这个线程打开以来已经有一段时间了，但认为它可能会帮助其他人。
回答by BuzzRage
Another way to do this (but not as efficient as using pointer-events: none;), is to set the same properties on both "disabled" and "hover when disabled":
另一种方法（但不如 using 有效pointer-events: none;）是在“禁用”和“禁用时悬停”上设置相同的属性：
input:hover{
color: #0CB;
}
input[type=button]:hover:disabled{
color: grey;
}<input type="button" value="Try Me !" />
<input type="button" value="Why not Me ?" disabled/>It's not the most beautiful, but it works too.
它不是最美丽的，但它也有效。
回答by Diodeus - James MacFarlane
Make the hover style the same as the default. Use a class name to turn this feature on or off.
使悬停样式与默认样式相同。使用类名打开或关闭此功能。
<button class="disabled" disabled>Click me</button>
button.disabled:hover { font-weight: inherit}
回答by covfefe
Put the property 'transform: none' in your overridden button class.
将属性 'transform: none' 放在覆盖的按钮类中。
