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" />