Css Reverse Transition And Select Previous Sibling

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.

Solution 1:

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/

Solution 2:

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

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /><divclass="container" ><divid="row"class="row" ><divid="form1"class="col-xs-6"><!-- form1 --><formclass="form-horizontal"><divclass="form-group"><labelclass="control-label col-xs-2"for="email">Email:</label><divclass="col-xs-10"><inputtype="email"class="form-control"id="email"placeholder="Enter email"></div></div><divclass="form-group"><labelclass="control-label col-xs-2"for="pwd">Password:</label><divclass="col-xs-10"><inputtype="password"class="form-control"id="pwd"placeholder="Enter password"></div></div><divclass="form-group"><divclass="col-xs-offset-2 col-xs-10"><divclass="checkbox"><label><inputtype="checkbox"> Remember me</label></div></div></div><divclass="form-group"><divclass="col-xs-offset-2 col-xs-10"><buttontype="submit"class="btn btn-default">Submit</button></div></div></form></div><divid="form2"class="col-xs-6"><!-- form 2 --><formclass="form-horizontal"><divclass="form-group"><labelclass="control-label col-xs-2"for="email">Email:</label><divclass="col-xs-10"><inputtype="email"class="form-control"id="email"placeholder="Enter email"></div></div><divclass="form-group"><labelclass="control-label col-xs-2"for="pwd">Password:</label><divclass="col-xs-10"><inputtype="password"class="form-control"id="pwd"placeholder="Enter password"></div></div><divclass="form-group"><divclass="col-xs-offset-2 col-xs-10"><divclass="checkbox"><label><inputtype="checkbox"> Remember me</label></div></div></div><divclass="form-group"><divclass="col-xs-offset-2 col-xs-10"><buttontype="submit"class="btn btn-default">Submit</button></div></div></form></div></div></div>