Javascript 如何使按钮随着光标悬停在其上而增大/缩小？

我在我的web开发类的项目页面上有一些简单样式的按钮，我想知道是否有可能使它们在用户鼠标悬停在按钮上时做出反应。鼠标悬停时会增长，鼠标移开时会收缩。我对web开发相当陌生，所以我不确定这在HTML/CSS中是否可行，或者是否需要一些javascript修补。

CSS中有

：hover

选择器可以帮助您实现这一点。如果您的按钮具有某些类别，例如“sendForm”，则可以执行以下操作：

.sendForm {
    width: 2rem; //or other units
}
.sendForm:hover {
    width: 4rem; // or other units
}

但是，我建议更改按钮上的填充大小，使文本始终适合内部，如：

.sendForm {
    display: inline-block;
    padding: 0 8px 0 8px; 
}
.sendForm:hover {
    padding: 0 16px 0 16px; 
}

---

您还可以使用速记法：

填充：0 8px

；如果您想了解CSS中填充符号的更多信息，请参阅MDn:

非常简单。只需使用css并将鼠标悬停在按钮上

按钮：悬停{
宽度：120px；
高度：60px；
显示：内联块；
字体大小：24px；
}

---

单击我

确定。看看悬停选择器：嗨，Anoel，欢迎来到StackOverflow！下一次请尝试使用您以前尝试过的代码：）