javascript - 使用 JavaScript 将类添加到悬停元素

Question

我有一个按钮，它会在悬停时改变颜色。

const btn = document.querySelector('.btn');
btn.classList.add('green-background');

.btn {
  text-decoration: none;
  background: blue;
  color: white;
  font-size: 20px;
}

.btn:hover {
  background: magenta;
  cursor: pointer;
}

.green-background {
  background: green;
}

<input class="btn" type="submit" value="Click me" />

我想给它添加 green-background 类，这样按钮在默认状态下和悬停时也是绿色的。

Answer 1

您只需要添加一个 css 规则来指定悬停时 .green-background 的样式，您可以通过为 .green-background:hover 设置样式来实现这一点

const btn = document.querySelector('.btn');
btn.classList.add('green-background');

.btn {
  text-decoration: none;
  background: blue;
  color: white;
  font-size: 20px;
}

.btn:hover {
  background: magenta;
  cursor: pointer;
}

.green-background, .green-background:hover {
  background: green;
}

<input class="btn" type="submit" value="Click me" />