CSS悬停文本用按钮改变颜色

Question

因此,为元素设置悬停效果非常简单.但我想要的是当用户将鼠标悬停在其中包含文本的按钮上时,使按钮从黑色变为白色,同时将文本从白色变为黑色.而不是两个单独的元素.我该怎么做？

谢谢!

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

Answer 1

我不确定你是如何设置代码的,但是这可以在一个带有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:

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

DEMO