CSS Hover Text Button Color Change

Question

So, it's pretty easy to set a hover over the effect for an element. But I want the user to hang above the button with the text in it, so that the button turns from black to white and the text from white to black at the same time. Instead of two separate elements. How can I do it?

Thanks!

#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

I'm not sure how you set up the code, but this will work with a div with a function onclickattached as a button:

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

Fiddle