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

Answer 2

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

Answer 3

你可以做

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

的jsfiddle

Answer 4

在懸停時使用color屬性更改文本顏色。

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

這是一個演示。

Answer 5

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

小提琴