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

Question

有没有办法向:hover上的元素添加新的CSS类？

喜欢jQuery，但已翻译成CSS：

$(element).addClass('someclass');

Answer 1

简短回答否：）

但你可以像悬停一样使用相同的CSS：

a:hover, .hoverclass {
    background:red;
}

也许如果您解释为什么需要添加课程，可能会有更好的解决方案？

Answer 2

由于每个人都给你jQuery / JS答案，我将提供一个额外的解决方案。您的问题的答案仍然是否定，但使用LESS（CSS预处理器）您可以轻松完成此任务。

.first-class {
  background-color: yellow;
}
.second-class:hover {
  .first-class;
}

很简单，只要您将鼠标悬停在.second-class上，它就会为.first-class提供所有属性。请注意，它不会永久添加类，只是在悬停时。您可以在此处详细了解LESS：Getting Started with LESS

这也是一种SASS方式：

.first-class {
  background-color: yellow;
}
.second-class {
  &:hover {
    @extend .first-class;
  }
}

Answer 3

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

Answer 4

:hover是一个伪类，所以你可以把你的CSS声明放在那里：

a:hover {
    color: #f00;
}

您还可以使用选择器列表将CSS声明应用于悬停元素或具有特定类的元素：

.some-class,
a:hover {
    color: #f00;
}

Answer 5

为什么@Marco Berrocl得到负面反馈，他的回答是完全正确的 那么使用一个库制作一些动画，所以我需要在悬停到元素时调用该类而不是从库中复制代码，这会让我变慢。

所以我认为没有答案，他应该在很多情况下使用jquery或javascript

Answer 6

您就是这样做的：

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

Answer 7

是的-首先使用onmouseover捕获事件，然后使用设置类名 Element.className。

如果您想添加或删除类，请使用更方便的Element.classList 方法。

.active {
  background: red;
}

<div onmouseover=className="active">
  Hover this!
</div>

Answer 8

仅使用CSS，不。你需要使用jQuery来添加它。