CSS 如何动态地向元素添加新类？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12886972/
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
How do I add a new class to an element dynamically?
提问by itsme
Is there any way to add a new CSS class to an element on :hover?
有什么方法可以向 上的元素添加新的 CSS 类:hover吗？
Like for jQuery, but translated into CSS:
类似于 jQuery，但转换为 CSS：
$(element).addClass('someclass');
回答by Rene Koch
Short answer no :)
简短的回答没有:)
But you could just use the same CSS for the hover like so:
但是你可以像这样对悬停使用相同的 CSS：
a:hover, .hoverclass {
background:red;
}
Maybe if you explain why you need the class added, there may be a better solution?
也许如果您解释为什么需要添加该类，可能有更好的解决方案？
回答by Nate
Since everyone has given you jQuery/JS answers to this, I will provide an additional solution. The answer to your question is still no, but using LESS (a CSS Pre-processor) you can do this easily.
由于每个人都为此提供了 jQuery/JS 答案，因此我将提供一个额外的解决方案。您的问题的答案仍然是否定的，但是使用 LESS（CSS 预处理器）您可以轻松地做到这一点。
.first-class {
background-color: yellow;
}
.second-class:hover {
.first-class;
}
Quite simply, any time you hover over .second-classit will give it all the properties of .first-class. Note that it won't add the class permanently, just on hover. You can learn more about LESS here: Getting Started with LESS
很简单，任何时候你将鼠标悬停在.second-class它上面都会给它所有的.first-class. 请注意，它不会永久添加类，只是在悬停时添加。您可以在此处了解有关 LESS 的更多信息：LESS入门
Here is a SASS way to do it as well:
这也是一种 SASS 方法：
.first-class {
background-color: yellow;
}
.second-class {
&:hover {
@extend .first-class;
}
}
回答by Fluidbyte
CSS really doesn't have the ability to modify an object in the same manner as JavaScript, so in short - no.
CSS 确实没有能力以与 JavaScript 相同的方式修改对象，所以简而言之 - 不。
回答by nathan
:hoveris a pseudoclass, so you can put your CSS declarations there:
:hover是一个伪类，所以你可以把你的 CSS 声明放在那里：
a:hover {
color: #f00;
}
You can also use a list of selectors to apply CSS declarations to a hovered element or an element with a certain class:
您还可以使用选择器列表将 CSS 声明应用于悬停元素或具有特定类的元素：
.some-class,
a:hover {
color: #f00;
}
回答by radbyx
This is how you do it:
这是你如何做到的：
var e = document.getElementById('myIdName');
var value = window.getComputedStyle(e, null).getPropertyValue("zIndex");
alert('z-index: ' + value);
回答by radbyx
why @Marco Berrocl get a negative feedback and his answer is totally right what about using a library to make some animation so i need to call the class in hover to element not copy the code from the library and this will make me slow.
为什么@Marco Berrocl 得到负面反馈，他的回答是完全正确的，关于使用库制作一些动画如何，所以我需要将悬停中的类调用到元素而不是从库中复制代码，这会让我变慢。
so i think hover not the answer and he should use jquery or javascript in many cases
所以我认为悬停不是答案，他应该在很多情况下使用 jquery 或 javascript
回答by Marco Berrocal
Using CSS only, no. You need to use jQuery to add it.
仅使用 CSS，不。您需要使用 jQuery 来添加它。
