Hover an element and change another element - css

Question

When I hover a text field, I want the font color of the submit field to become red.
I tried the operators >, + and ~ but none of them works.
This is what I have so far: http://jsfiddle.net/p0zxctet/

Answer 1

I just came back through my stack overflow and saw this hasn't been answered sufficiently yet. Here is my solution utilizing jQuery to get the effect you were looking for:
The HTML
<input type="text" id="textField" placeholder="Hover Here"/>
<input type="submit" id="submitBtn" />
The jQuery
$("#textField").hover(function(){
$("#submitBtn").css({"color":"red"});
});
$("#textField").mouseout(function() {
$("#submitBtn").css({"color":"black"});
});
Here is the fiddle showing this in action: https://jsfiddle.net/z9czoedp/

Answer 2

You need to consider browser prefixes as well.
input {
color: #cfcfcf;
}
input::-webkit-input-placeholder {
color: #cfcfcf;
}
input:-moz-placeholder { /* Firefox 18- */
color: #cfcfcf;
}
input::-moz-placeholder { /* Firefox 19+ */
color: #cfcfcf;
}
input:-ms-input-placeholder {
color: #cfcfcf;
}
/*
* On hover
*/
input:hover::-webkit-input-placeholder,
input:focus::-webkit-input-placeholder {
color: #F00;
}
input:hover:-moz-placeholder,
input:focus:-moz-placeholder{ /* Firefox 18- */
color: #F00;
}
input:hover::-moz-placeholder,
input:focus::-moz-placeholder{ /* Firefox 19+ */
color: #F00;
}
input:hover:-ms-input-placeholder,
input:focus:-ms-input-placeholder{
color: #F00;
}

Answer 3

try to use :hover Selector
.form-control.search-field:hover{
color: red;
}
5-28 added
Do you mean when you hover the input, the submit button change its color to red?
I think css cannot do that. You need to use javascript, like:
document.querySelector("#db-search").onmouseover = function(){
document.querySelector("input[type=submit]").style.color = "red"
}
document.querySelector("#db-search").onmouseout = function(){
document.querySelector("input[type=submit]").style.removeProperty("color")
}