CSS Hover Text Changing Color With Button

Problem

So, it's pretty easy to set a hover over effect for an element. But what I want is when the user hovers over a button that has text in it, to make the button turn from black to white and the text from white black at the same time. Instead of two separate elements. How should I do this?

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;
}
Problem courtesy of: user2605157

Solution

I'm not sure how you have the code set up but this would work on a div with an onclick function attached 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

Solution courtesy of: Phlume

Discussion

#signUpBox:hover {
    background-color: #ffffff;
    color:#000000;
}
Discussion courtesy of: joe

you can do

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

JSFIDDLE

Discussion courtesy of: jmore009

change text color using color property on hover.

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

Here is a demo.

Discussion courtesy of: Mayank Modi
#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

Discussion courtesy of: Karuppiah

This recipe can be found in it's original form on Stack Over Flow.