Html CSS悬停文本使用按钮更改颜色

因此，为元素设置悬停效果非常容易。但我想要的是，当用户将鼠标悬停在一个包含文本的按钮上时，使按钮从黑色变为白色，同时使文本从白色变为黑色。而不是两个独立的元素。我该怎么做

谢谢

#signUpBox {
    width: 150px;
    height: 47px;
    border-style: solid;
    border-width: 1px;
    margin: auto;
    margin-top: 25px;
    border-radius: 2px;
}

#signUpBox:hover {
    background-color: #ffffff;
}

h3 {
    text-align: center;
    margin-top: -35px;
    letter-spacing: 1px;
    font-size: 17px;
}

你能行

#signUpBox:hover h3 {
  color: #000;
}

---

在悬停状态下使用

color

属性更改文本颜色

#signUpBox:hover {
    background-color: black;
    color: white;
}

这是一个

---

我不确定您是如何设置代码的，但这将适用于带有

onclick

功能的div，该功能作为按钮附加：

#signUpBox {
    width: 150px;
    height: 47px;
    border: solid 1px #000;
    margin: auto;
    margin-top: 25px;
    border-radius: 2px;
    color:#000;
    background:#fff;

}

#signUpBox:hover {
    background: #000;
    color:#fff;
}

HTML:

这是一个测试

---

颜色将变为黑色，否则什么都看不见。@Joseph:看我的小提琴演示……五分钟内你得到了5个几乎相同的答案。。。好像你知道该怎么做！：-）潜水艇是个问题！谢谢我会在6分钟内回答这个问题。我得等一等。

#signUpBox {
    width: 150px;
    height: 47px;
    border-style: solid;
    border-width: 1px;
    margin: auto;
    margin-top: 25px;
    border-radius: 2px;
    background: #000000;
    color: #FFFFFF;
}

#signUpBox:hover {
    background: #ffffff;
    color: #000000;
    cursor: pointer;
}

#signUpBox {
    width: 150px;
    height: 47px;
    border: solid 1px #000;
    margin: auto;
    margin-top: 25px;
    border-radius: 2px;
    color:#000;
    background:#fff;

}

#signUpBox:hover {
    background: #000;
    color:#fff;
}

<div id="signUpBox">This is a test</div>