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类中，以便按钮在默认状态下和悬停时都是绿色的。

标签： javascripthtmlcssdomhover

Answer 1

您可以使用,default 和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:hover,.green-background {
  background: green;
}

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