使用 JavaScript 向可悬停元素添加类答案

【问题标题】：Adding class to hoverable element with JavaScript使用 JavaScript 向可悬停元素添加类
【发布时间】：2019-04-01 02:35:27
【问题描述】：

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

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;
}

&lt;input class="btn" type="submit" value="Click me" /&gt;

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

【问题讨论】：

那么为什么首先让它变成洋红色呢？ ...只需从悬停规则中删除 background: magenta;
@LGSon 因为在 js 工作之前我希望它在悬停时是洋红色的。
然后增加绿色背景的特异性，例如.btn.green-background 当类被添加时，它保持绿色
@LGSon 这应该在css中完成吗？
是的，例如像这样（先悬停按钮，然后点击添加类，再次悬停）jsfiddle.net/15kjd03e/1

标签： javascript html css dom hover

【解决方案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;
}

&lt;input class="btn" type="submit" value="Click me" /&gt;

【讨论】：

【解决方案2】：

您可以使用默认的, 和hover 组合两个选择器。请参阅Groups of selectors on one rule 了解更多信息。

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;
}

&lt;input class="btn" type="submit" value="Click me" /&gt;

【讨论】：

【解决方案3】：

 function changeclass() {
            const btn = document.querySelector('.btn');
            if (!btn.classList.contains('green-background'))
                btn.classList.add('green-background');
            else
                btn.classList.remove('green-background');

        }

<!-- language: lang-css -->

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

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

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

<!-- language: lang-html -->

    <input class="btn" type="submit" value="Click me" onmouseover="changeclass()" onmouseout="changeclass()" />

您问如何通过 java 脚本添加类：只需将 onmouseover="changeclass()" onmouseout="changeclass()" 事件添加到按钮和 changeclass 函数但您也可以通过与批准答案相同的 css 来完成。

【讨论】：