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/
-
.search-field:hover{color: red;} works fine, or do you mean the placeholder text?Bosc– Bosc2015-05-27 00:56:14 +00:00Commented May 27, 2015 at 0:56
Add a comment
|
3 Answers
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/
2 Comments
Reza Saadati
Sorry my bad, I was going to ask how to change the font color of the submit field, not the text field. I have edited the question above.
gjanden
You may need to go with a javascript / jquery solution to this. The way it is structured currently, you would need to target a cousin and there isn't really a good way to select cousin elements running down the DOM.
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;
}
2 Comments
Reza Saadati
Sorry my bad, I was going to ask how to change the font color of the submit field, not the search field. I have edited the question above.
Prasanga
Use attribute selectors, input[type="submit"]:hover { color:red; }
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")
}
1 Comment
Reza Saadati
Sorry my bad, I was going to ask how to change the font color of the submit field, not the search field. I have edited the question above.