CSS Reverse transition and select previous sibling

Question

CSS Reverse transition and select previous sibling

527 views Asked by Selva At 24 November 2024 at 05:39

Bootstrap container has two forms horizontally. Hovering over Form1 will increase the width and decreases the width of form2. but reverse is not happening. Any suggestions please.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <style>
  #row{
  background-color: lightblue;
  border-style: groove;
  }

  #form1{
  background-color: lightgreen;
  width: 50%;
  transition: width 0.75s ease;
  }

  #form1:hover{  
    width: 75%;
  }

  #form1:hover + #form2{
     width: 25%
   }

  #form2{
  background-color: orange;
  width: 50%;
  transition: width 0.75s ease;
  }  

  #form2:hover{
  width: 75%;  
  }

  #form2:hover ~ #form1{
     width: 25%
     }
  </style>


</head>
<body>

<div  class="container" >

  <div id="row" class="row" >
    <div id="form1" class="col-sm-6">
    <!-- form1 -->
        <form class="form-horizontal">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="pwd">Password:</label>
    <div class="col-sm-10"> 
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
  </div>
  <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
    </div>
  </div>
  <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>
    </div>
    <div id="form2" class="col-sm-6">
    <!-- form 2 -->
        <form class="form-horizontal">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="pwd">Password:</label>
    <div class="col-sm-10"> 
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
  </div>
  <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
    </div>
  </div>
  <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>
    </div>
</div>

</div>

</body>
</html>

Please see the below image. When hovering on Green form, form goes left to right ,Orange form decreases the width and Green form increases the width but this is not happening while hovering on Orange form(Reverse direction).

Basically I'm trying to achieve form like THIS

Original Q&A

There are 2 answers

Banzay On 05 January 2017 at 19:49

The solution with pure CSS exists. You need to define css-rule for selector which selects form1 when this form is unhovered while row is hovered: #row:hover > #form1:not(:hover)

#row:hover > #form1:not(:hover){
     width: 25%;
}

http://www.codeply.com/go/0Q2gFDoc4y

look at snippet (for some reason it works in full screen mode):

#row{
  background-color: lightblue;
  border-style: groove;
  }

  #form1{
  background-color: lightgreen;
  width: 50%;
  transition: width 0.75s ease;
  }

  #form1:hover{  
    width: 75%;
  }

  #form1:hover + #form2{
     width: 25%
   }

  #form2{
  background-color: orange;
  width: 50%;
  transition: width 0.75s ease;
  }  

  #form2:hover{
  width: 75%;  
  }

  #row:hover > #form1:not(:hover){
     width: 25%;
     }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div  class="container" >

  <div id="row" class="row" >
    <div id="form1" class="col-xs-6">
    <!-- form1 -->
        <form class="form-horizontal">
  <div class="form-group">
    <label class="control-label col-xs-2" for="email">Email:</label>
    <div class="col-xs-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-xs-2" for="pwd">Password:</label>
    <div class="col-xs-10"> 
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
  </div>
  <div class="form-group"> 
    <div class="col-xs-offset-2 col-xs-10">
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
    </div>
  </div>
  <div class="form-group"> 
    <div class="col-xs-offset-2 col-xs-10">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>
    </div>
    <div id="form2" class="col-xs-6">
    <!-- form 2 -->
        <form class="form-horizontal">
  <div class="form-group">
    <label class="control-label col-xs-2" for="email">Email:</label>
    <div class="col-xs-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-xs-2" for="pwd">Password:</label>
    <div class="col-xs-10"> 
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
  </div>
  <div class="form-group"> 
    <div class="col-xs-offset-2 col-xs-10">
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
    </div>
  </div>
  <div class="form-group"> 
    <div class="col-xs-offset-2 col-xs-10">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>
    </div>
</div>

</div>

**Serg Chernata** · Accepted Answer · 2017-01-05 19:46:41

You can do this with flexbox. As Selva has mentioned, CSS can only select the next sibling, not the previous. However, with flexbox this is much easier:

.flexible{display: flex; flex-direction: row;}
#form1:hover{  
    width: 100%;
}
#form2:hover{  
    width: 100%;
}

https://jsfiddle.net/2g4krj0f/

TechQA.

CSS Reverse transition and select previous sibling

There are 2 answers

Related Questions in CSS

Related Questions in HTML

Related Questions in TWITTER-BOOTSTRAP

Related Questions in CSS-TRANSITIONS

Related Questions in SIBLINGS

Popular Questions

Popular Tags

Trending Questions