如何动态地向元素添加新类？

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');

7 个解决方案

#1

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?

也许如果你解释为什么你需要添加这个类，可能有更好的解决方案？

#2

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-class it 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;
  }
}

#3

CSS really doesn't have the ability to modify an object in the same manner as JavaScript, so in short - no.

CSS实际上没有能力以与JavaScript相同的方式修改对象，所以简而言之 - 没有。

#4

:hover is 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;
}

#5

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

#6

This is how you do it:

这是你如何做到的：

var e = document.getElementById('myIdName');
var value = window.getComputedStyle(e, null).getPropertyValue("zIndex");
alert('z-index: ' + value);

#7

-2

Using CSS only, no. You need to use jQuery to add it.

仅使用CSS，没有。您需要使用jQuery来添加它。

#1