[英]2 div boxes side by side with 50% width and 100% height, expanding to 100% fill up the whole width on hover on each box
這是一個使用flexbox的方法。
為了讓懸停效果能夠在之前的兄弟上工作,我已經顛倒了HTML中的順序。 可能有一種更簡單的方法可以做到這一點,但我無法解決它..
.container { display: flex; height: 200px; border: 2px solid grey; overflow: hidden; box-sizing: border-box; } .block { background: pink; flex: 1; margin: 10px; /* below is styling for demo */ display: flex; justify-content: center; align-items: center; cursor: pointer; } .b { order: 2; } .block:hover { min-width: calc(100% - 20px); } .block:first-of-type:hover+.block { display: none; }
<div class="container"> <div class="block b">B</div> <div class="block a">A</div> </div>
Flexbox可以做任何事情(差不多):
* { box-sizing: border-box; } body,html { margin:0; height: 100vh; } body { display: flex; align-items:center; justify-content: center; } .container { border: 7px solid #999; height: 200px; width: 500px; background-color: lightgreen; display: flex; } .left, .right { height: 100%; transition: all 0.5s; flex: 0 1 50%; } .left:hover, .right:hover { flex: 1 0 100%; } .left { background-color: lightsalmon; } .right { background-color: mediumpurple; }
<div class="container"> <div class="left"></div> <div class="right"></div> </div>
在CSS上,你可以做這樣的事情:
.container .box_A,
.container .box_B {
width: 50%;
overflow: hidden;
height: 100%;
-webkit-font-smoothing: antialiased;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.container:hover .box_A ,
.container:hover .box_B {
width: 0%;
}
.container:hover .box_A:hover ,
.container:hover .box_B:hover {
width: 100%;
}
對於像這樣的HTML:
<div class="container">
<div class="box_A"></div>
<div class="box_B"></div>
</div>
有一些jquery
$(".a").on("mouseover", function () { $(".a").css("width" , "100%"); $(".b").css("width" , "0"); }); $(".b").on("mouseover", function () { $(".b").css("width" , "100%"); $(".a").css("width" , "0"); }); $(".a").on("mouseout", function () { $(".a").css("width" , "50%"); $(".b").css("width" , "50%"); }); $(".b").on("mouseout", function () { $(".a").css("width" , "50%"); $(".b").css("width" , "50%"); });
body, html {height:100%; margin:0;} .a { background-color:red; width:50%; height:100%; float:left; transition: all .3s; } .b { background-color:blue; width:50%; height:100%; float:left; transition: all .3s; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="a"></div> <div class="b"></div>
您可以像這樣使用CSS:
.parent {
border: 2px solid black;
height: 3em;
position: relative;
width: 10em;
}
.left {
background: red;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 50%;
z-index: 1;
transition: width 1s;
}
.left:hover {
width: 100%;
z-index: 2;
transition: width 1s;
}
.right {
background: blue;
height: 100%;
position: absolute;
right: 0;
top: 0;
width: 50%;
z-index: 1;
transition: width 1s;
}
.right:hover {
transition: width 1s;
width: 100%;
z-index: 2;
}
做一個小提琴來說明例子: 小提琴
對於像這樣的CSS:
.ParentDiv{ border:1px solid #000; height:200px; width:300px; margin:0 auto; position: relative; } .Box_A { width:50%; height:100%; text-align:center; left:0; background: #ff3232; transition:all 2s ease; position: absolute; } .Box_A:hover { width:100%; background: #fff; z-index: 2; display:block; } .Box_A > a { display: block; height: 100%; } .Box_B { width:50%; height:100%; text-align:center; right:0; background: #ff3232; transition:all 2s ease; position: absolute; border-left:1px solid gray; } .Box_B:hover { width:100%; background: #fff; z-index: 2; display:block; } .Box_B > a { display: block; height: 100%; }
<div class="ParentDiv"> <div class="Box_A"><a href="">Box A</a></div> <div class="Box_B"><a href="">Box B</a></div> </div> <!--End ParentDiv-->
對於以下HTML:
<body>
<div class = "left" id = "left">
</div>
<div class = "right" id = "right">
</div>
</body>
CSS:
body {
background-color: #ffeead;
}
.left:hover,
.right:hover{
width: 60%;
}
.left:hover ~ #right {
width: 40%;
}
.left {
background-color: #ff6f69;
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 50%;
transition: width 1s;
}
.right {
background-color: #ffeead;
position: absolute;
right: 0px;
top: 0px;
height: 100%;
width: 50%;
transition: width 1s;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.