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

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

const btn=document.querySelector（'.btn'）；
btn.classList.add（'green-background'）
.btn{
文字装饰：无；
背景：蓝色；
颜色：白色；
字体大小：20px；
}
.btn:悬停{
背景：洋红；
光标：指针；
}
.绿色背景{
背景：绿色；
}
您可以使用
、
默认值和
悬停组合两个选择器。有关更多信息，请参阅


const btn=document.querySelector（'.btn'）；
btn.classList.add（'green-background'）
.btn{
文字装饰：无；
背景：蓝色；
颜色：白色；
字体大小：20px；
}
.btn:悬停{
背景：洋红；
光标：指针；
}
.绿色背景：悬停，.绿色背景{
背景：绿色；
}
您只需要添加一个css规则来指定悬停时.green background的样式，您可以通过设置
的样式来实现。green background:hover


const btn=document.querySelector（'.btn'）；
btn.classList.add（'green-background'）
.btn{
文字装饰：无；
背景：蓝色；
颜色：白色；
字体大小：20px；
}
.btn:悬停{
背景：洋红；
光标：指针；
}
.绿色背景，.绿色背景：悬停{
背景：绿色；
}
函数变更类（）{
const btn=document.querySelector（'.btn'）；
如果（！btn.classList.contains（'green-background'））
btn.classList.add（'green-background'）；
其他的
btn.classList.remove（'green-background'）；
}
.btn{
文字装饰：无；
背景：蓝色；
颜色：白色；
字体大小：20px；
}
.btn:悬停{
背景：洋红；
光标：指针；
}
.绿色背景，.绿色背景：悬停{
背景：绿色；
}

您询问了如何通过java脚本添加类：只需将onmouseover=“changeclass（）”onmouseout=“changeclass（）”事件添加到按钮和changeclass函数
但是你也可以用css来做，就像批准的答案一样。
那么为什么要先用洋红色呢。。。只需去除背景：洋红色从悬停rule@LGSon因为在js工作之前，我希望它在悬停状态下是洋红色的。然后用
.btn.green background
等增加绿色背景的特异性，当类被添加时，它会保持不变green@LGSon这应该在css中完成吗？是的，例如这样（首先将按钮悬停，然后单击以添加类，再次悬停）
 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()" />