css - 如何动态地将新类添加到元素中？

Question

有什么办法可以在元素上添加一个新的 CSS 类:hover？

类似于 jQuery，但翻译成 CSS：

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

score 33 · Accepted Answer

简短的回答没有:)

但是您可以像这样对悬停使用相同的 CSS：

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

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

score 22 · Accepted Answer

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

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

很简单，任何时候你将鼠标悬停在.second-class它上面都会给它所有的属性.first-class。请注意，它不会永久添加类，只是在悬停时。您可以在此处了解有关 LESS 的更多信息：LESS入门

这也是一种 SASS 方法：

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

score 6 · Accepted Answer

6

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

于 2012-10-14T22:03:29.893 回答

score 3 · Accepted Answer

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

a:hover {
    color: #f00;
}

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

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

score 0 · Accepted Answer

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

所以我认为悬停不是答案，他应该在很多情况下使用 jquery 或 javascript

score 0 · Accepted Answer

这就是你的做法：

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

score 0 · Accepted Answer

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

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

.active {
  background: red;
}

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

score -2 · Accepted Answer

-2

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

于 2012-10-14T22:03:01.093 回答

8 回答 8