CSS: Hover a HTML submit button - html

Question

I'm trying to style a HTML submit button in CSS:
HTML:
<input type="submit" value="Yes" id="popUpYes">
CSS:
#popUpYes
{
width: 60px;
height: 30px;
background-color: black;
}
#popUpYes:hover
{
background-color: white;
}
The basic style works but the background does not change color on hover.

Answer 1

Your original code works for me. Be sure you don't have any other conflicting styles inherited by the submit button.

Answer 2

Try this JSfiddle
Try this:
#popUpYes {
width: 60px;
height: 30px;
background-color: black;
color: white;
/* SET COLOR IN WHITE */
}
#popUpYes:hover {
background-color: white;
color: black;
/* SET COLOR IN BLACK */
}
<input type="submit" value="Yes" id="popUpYes">
You have to assign the color - attribute for the text.

Answer 3

I tried this in Chrome and it worked.
#popUpYes {
width: 60px;
height: 30px;
background-color: black;
color: #fff;
}
#popUpYes:hover {
background-color: white;
}
<input type="submit" value="Yes" id="popUpYes">

Answer 4

As per your question "The basic style works but the background does not change color on hover." , this happens only when you set your BackColor or background-color through properties. your code works fine because you have used css class instead of properties.

Answer 5

The code as it is now working -> http://jsfiddle.net/2wYqd/ What is your browser?
#popUpYes {
width: 60px;
height: 30px;
background-color: black;
}
#popUpYes:hover {
background-color: white;
}

Answer 6

My work may be of use to you in this regard.
input[type=submit] {
background-color: #42b72a;
color: white;
border: 5px solid #42b72a;
width: 200px;
}
#kayitol:hover {
box-shadow: 0 0 10px #0099ff;
font-weight: bold;
color: black;
}
input[type=reset] {
background-color: #FF8A80;
color: white;
border: 5px solid #FF8A80;
width: 120px;
}
#iptal:hover {
box-shadow: 0 0 10px #FF3C41;
font-weight: bold;
color: black;
}
<input type="submit" id="kayitol" value="Kayıt Ol">
<input type="reset" id="iptal" value="Vaz Geçtim">

Answer 7

Working fine link
#popUpYes {
width: 60px;
height: 30px;
background-color: black;
color:white;
}
#popUpYes:hover {
background-color: white;
color: black;
}