CODEWITHSUNDEEP
css
Saiyam Gambhir
Saiyam Gambhir

Reputation: 546

Hover on one element changes on another with css only

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.

Upvotes: 2

Views: 3212

Answers (4)

Ashwani
Ashwani

Reputation: 303

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

Upvotes: 1

Moneer Kamal
Moneer Kamal

Reputation: 1877

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/

Upvotes: 2

Ruddy
Ruddy

Reputation: 9923

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>

Upvotes: 5

Alex
Alex

Reputation: 829

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>

Upvotes: 4

Related Questions