Hover on one element changes on another with css only - css

Question

Hi its a very basic question i just want to know when hover on one element the style of other changes how can I achieve this ?
<form id="numerical" class="row">
<div class="form-group row">
<label>Enter Number :</label>
<input type="text" id="tel">
</div>
<div class="form-group row">
<label>Result :</label>
<input type="text" id="result">
</div>
<button type="submit" id="btn" class="row">Submit</button>
</form>
Like when i hover on button border-color of all the input changes.
I only want this with css no js or jQuery.

Answer 1

It is possible to do this but not with your current code.
Below is code of this working, the hover element will have to be before the elements you want to change. It works by going down and not up, so if this button is at the bottom you will not be able to see the same effect as the effect does not effect elements that are already rendered.
button:hover ~ div input {
border: 1px solid red;
}
<form id="numerical" class="row">
<button type="submit" id="btn" class="row">Submit</button>
<div class="form-group row">
<label>Enter Number :</label>
<input type="text" id="tel">
</div>
<div class="form-group row">
<label>Result :</label>
<input type="text" id="result">
</div>
</form>
We can select other elements siblings by using the ~ selector.
The ~ combinator separates two selectors and matches the second
element only if it is preceded by the first, and both share a common
parent.
More here
Here is the button at the bottom, as you can see it will not work.
button:hover ~ div input {
border: 1px solid red;
}
<form id="numerical" class="row">
<div class="form-group row">
<label>Enter Number :</label>
<input type="text" id="tel">
</div>
<div class="form-group row">
<label>Result :</label>
<input type="text" id="result">
</div>
<button type="submit" id="btn" class="row">Submit</button>
</form>

Answer 2

for a pure css solution you need to move the <button>-tag in front of the inputs you want to change, but then it'll work like this
button:hover ~ .form-group input {
border-color: red;
}
<form id="numerical" class="row">
<button type="submit" id="btn" class="row">Submit</button>
<div class="form-group row">
<label>Enter Number :</label>
<input type="text" id="tel">
</div>
<div class="form-group row">
<label>Result :</label>
<input type="text" id="result">
</div>
</form>

Answer 3

that is possible only if the inputs after the button
<form id="numerical" class="row">
<button type="submit" id="btn" class="row">Submit</button>
<div class="form-group row">
<label>Enter Number :</label>
<input type="text" id="tel">
</div>
<div class="form-group row">
<label>Result :</label>
<input type="text" id="result">
</div>
</form>
and the css:
#btn:hover ~ .form-group input {
background: #000;
}
after that you can use position absolute for the button
and this is demo
http://jsfiddle.net/u7tYE/6037/

Answer 4

try this
<form id="numerical" class="row">
<label for="btn" class="label"></label>
<div class="form-group row">
<label>Enter Number :</label>
<input type="text" id="tel">
</div>
<div class="form-group row">
<label>Result :</label>
<input type="text" id="result">
</div>
<button type="submit" id="btn" class="row">Submit</button>
</form>
<style>#numerical{
position: relative;
}
.form-group {
margin-bottom:10px;
}
#numerical .label {
position: absolute;
bottom: 0;
left: 0;
height: 32px;
width:102px;
}
.label:hover ~ .form-group input {
border: solid 2px red;
}
#btn{
background:blue;
color:#fff;
height:30px;
width:100px;
} </style>
Fiddle