CODEWITHSUNDEEP
css
Reza Saadati
Reza Saadati

Reputation: 5439

Hover an element and change another element

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/

Upvotes: 0

Views: 85

Answers (3)

gjanden
gjanden

Reputation: 101

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/

Upvotes: 1

Shiyou
Shiyou

Reputation: 121

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")
}

Upvotes: 0

Prasanga
Prasanga

Reputation: 1038

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;
}

Upvotes: 0

Related Questions