CSS反向转换并选择以前的同级 [英] CSS Reverse transition and select previous sibling
本文介绍了CSS反向转换并选择以前的同级的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
Bootstrap容器有两种水平方式。
将鼠标悬停在Form1上将增加form2的宽度并减小其宽度。
但是没有发生反转。任何建议。
<！DOCTYPE html>
< html lang =en>
< head>
< title> Bootstrap示例< / title>
< meta charset =utf-8>
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< link rel =stylesheethref =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>
< body>
< div class =container>
< div id =rowclass =row>
< div id =form1class =col-sm-6>
<！ - form1 - >
< form class =form-horizontal>
< div class =form-group>
< label class =control-label col-sm-2for =email>电子邮件：< / label&
< div class =col-sm-10>
< input type =emailclass =form-controlid =emailplaceholder =输入电子邮件>
< / div>
< / div>
< div class =form-group>
< label class =control-label col-sm-2for =pwd>密码：< / label&
< div class =col-sm-10>
< input type =passwordclass =form-controlid =pwdplaceholder =输入密码>
< / div>
< / div>
< div class =form-group>
< div class =col-sm-offset-2 col-sm-10>
< div class =checkbox>
< label>< input type =checkbox>记住我< / label>
< / div>
< / div>
< / div>
< div class =form-group>
< div class =col-sm-offset-2 col-sm-10>
< button type =submitclass =btn btn-default>提交< / button>
< / div>
< / div>
< / form>
< / div>
< div id =form2class =col-sm-6>
<！ - form 2 - >
< form class =form-horizontal>
< div class =form-group>
< label class =control-label col-sm-2for =email>电子邮件：< / label&
< div class =col-sm-10>
< input type =emailclass =form-controlid =emailplaceholder =输入电子邮件>
< / div>
< / div>
< div class =form-group>
< label class =control-label col-sm-2for =pwd>密码：< / label&
< div class =col-sm-10>
< input type =passwordclass =form-controlid =pwdplaceholder =输入密码>
< / div>
< / div>
< div class =form-group>
< div class =col-sm-offset-2 col-sm-10>
< div class =checkbox>
< label>< input type =checkbox>记住我< / label>
< / div>
< / div>
< / div>
< div class =form-group>
< div class =col-sm-offset-2 col-sm-10>
< button type =submitclass =btn btn-default>提交< / button>
< / div>
< / div>
< / form>
< / div>
< / div>
< / div>
< / body>
< / html>
请参阅下面的图片。当在绿色表单上悬停时，表单从左到右，橙色表单减小宽度，绿色表单增加宽度，但是在橙色表单（反向方向）上悬停时不会发生。
基本上我想实现形式像 THIS
解决方案
您可以使用 flexbox 执行此操作。正如Selva所提到的，CSS只能选择下一个兄弟，而不是以前的。但是，使用flexbox更容易：
.flexible {display：flex; flex-direction：row;}
＃form1：hover {
width：100％;
}
＃form2：hover {
width：100％;
}
https://jsfiddle.net/2g4krj0f/
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
解决方案
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/
这篇关于CSS反向转换并选择以前的同级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
