Question

I have an input tag nested inside a list tag. Here is the code:

<li class="button"><input name="submit_details" type="submit" value="Next" /></li>

Now when I use the following style:

 .button:hover{color:#ffffff}, 

the text value “Next” does not change color(to white) when I hover over it.

Any suggestions on how to make that work?

Thanks

Answer 1

You need to target the input itself as opposed to the li:

.button input:hover { color:#fff }

Or if you want the input text color to turn white upon li hover:

.button:hover input { color:#fff }