问题
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
回答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/
回答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%;
}<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>来源：https://stackoverflow.com/questions/41493217/css-reverse-transition-and-select-previous-sibling