使用JS写CSS会取消样式表中定义的:hover属性

Question

我有两个 div。一个是另一个的parent。当我将鼠标悬停在 parent 上时，child 会获得不同的背景颜色和字体颜色。但是，当我运行函数 switch() 更改 child 元素的内联样式时，悬停属性被取消。换句话说：在使用 JS 应用 CSS 后，悬停时 child 背景不会改变。

document.querySelector('button').onclick = function() {
  document.querySelector('.foo').style.backgroundColor = 'green';
}

.container {
  background-color: lightgrey;
  margin: auto;
  width: 200px;
  display: flex;
  align-items: center;
  height: 50px;
}
.foo {
  width: 100px;
  margin: auto;
  text-align: center;
}
.container:hover > .foo {
  background-color: #c01919;
  color: yellow;
}

<div class="container">
  <div class="foo">Hey there!</div>
</div>

<button>.foo(backgroundColor) -> green</button>

真正的问题是如何防止内联样式取消 CSS :hover properties?

在函数影响了内联样式后，有没有办法在鼠标悬停时使背景颜色变为红色？

Answer 1

The real question is how to prevent inline style from canceling CSS :hover properties?

如果不使用 !important（这很糟糕，所以不要），你不能。内联样式的要点在于它比任何选择器都更具体。

停止使用内联样式。在样式表中设置绿色，然后使用 JavaScript 更改元素所属的类来激活它。

document.querySelector('button').onclick = function() {
  document.querySelector('.foo').classList.add('bar');
}

.container {
  background-color: lightgrey;
  margin: auto;
  width: 200px;
  display: flex;
  align-items: center;
  height: 50px;
}
.foo {
  width: 100px;
  margin: auto;
  text-align: center;
}
.bar {
  background-color: green; 
}
.container:hover > .foo {
  background-color: #c01919;
  color: yellow;
}

<div class="container">
  <div class="foo">Hey there!</div>
</div>

<button>.foo(backgroundColor) -> green</button>

Answer 2

内联样式比样式表或 <style> 标记中定义的样式具有更高的权限，除非在规则定义中使用了 !important。您的用例看起来不是使用内联样式使按钮变绿，而是添加 class（也许 is-clicked）会更好。然后你会防止丑陋的内联样式，有一个语义 class 命名并且用 css.

覆盖那个样式没有问题

document.querySelector('.foo').classList.add('is-clicked');

注意：class（非常）旧的浏览器不支持列表。根据目标受众，我会说可以使用：http://caniuse.com/#search=classlist

使用JS写CSS会取消样式表中定义的:hover属性

Using JS to write CSS will cancel :hover properties defined in stylesheet

javascript

css

inline-styles