任何人都可以帮我弄清楚如何做到这一点。我在悬停时尝试扩展div,但是我无法从中心扩展它为b和c div,并且d从右边扩展,并且我尝试在展开时覆盖另一个div而不是推动它。
transform:scale()
方法无法使用,因为我稍后会用图片更改背景。我也试图避免使用jQuery。提前谢谢。
body {
background-color: grey;
margin: 0;
padding: 0;
}
.displaybox {
background-color: pink;
width: 100%;
height: 500px;
z-index: -1;
}
.box1, .box2, .box3, .box4 {
width: 25%;
height: inherit;
display: block;
float: left;
z-index: 1;
}
.box1 {
background-color: green;
}
.box2 {
background-color: blue;
}
.box3 {
background-color: red;
}
.box4 {
background-color: purple;
}
.box1:hover, .box2:hover, .box3:hover, .box4:hover {
width:100%;
z-index: 0;
transition: 1s ease;
}

<div class="displaybox">
<div class="box1">a</div>
<div class="box2">b</div>
<div class="box3">c</div>
<div class="box4">d</div>
</div>
&#13;
答案 0 :(得分:0)
解决方案是使用伪元素溢出来动画背景:
body {
background-color: grey;
margin: 0;
padding: 0;
}
.displaybox {
background-color: pink;
width: 100%;
height: 500px;
z-index: -1;
overflow:hidden;
}
.box {
width: 25%;
height: inherit;
display: block;
float: left;
z-index: 1;
position:relative;
background-color:var(--c);
transition:z-index 1s 1s;
}
.box:before {
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
z-index:-1;
background-color:var(--c);
transition:1s left,1s right;
}
.box:hover {
z-index:2;
transition:z-index 0s;
}
.box:hover::before {
left:-100vw;
right:-100vw;
}
<div class="displaybox">
<div class="box box1" style="--c:green">a</div>
<div class="box box2" style="--c:blue">b</div>
<div class="box box3" style="--c:red">c</div>
<div class="box box4" style="--c:purple">d</div>
</div>
答案 1 :(得分:0)
您可以通过绝对定位实现效果。将左侧和右侧值设置为0将使div扩展到边缘。我在左右值上使用百分比而不是25%的宽度,我必须在悬停状态下放置一个更高的z-index值,以使当前div立即跳到前面。
body {
background-color: grey;
margin: 0;
padding: 0;
}
.displaybox {
background-color: pink;
width: 100%;
height: 500px;
z-index: 0;
}
.box1, .box2, .box3, .box4 {
height: inherit;
z-index: 0;
position: absolute;
transition: 1s ease;
}
.box1 {
background-color: green;
left: 0;
right: 75%;
}
.box2 {
background-color: blue;
left: 25%;
right: 50%;
}
.box3 {
background-color: red;
left: 50%;
right: 25%;
}
.box4 {
background-color: purple;
left: 75%;
right: 0;
}
.box1:hover, .box2:hover, .box3:hover, .box4:hover {
z-index: 10;
left: 0;
right: 0;
}
&#13;
<div class="displaybox">
<div class="box1">a</div>
<div class="box2">b</div>
<div class="box3">c</div>
<div class="box4">d</div>
</div>
&#13;
答案 2 :(得分:0)
你可以用css过渡做到这一点,但我认为鼠标输出动画很差,因为它太早失去它的z-index(所以你看不到右侧动画向后):
body {
background-color: grey;
margin: 0;
padding: 0;
}
.displaybox {
display:flex;
background-color: pink;
width: 100%;
height: 500px;
position: relative;
}
.box {
display: block;
position: absolute;
top: 0;
bottom: 0;
width:25%;
transition: 1s ease;
}
.box:hover {
left: 0;
width:100%;
z-index:1;
}
.box1 {
background-color: green;
left: 0;
}
.box2 {
background-color: blue;
left: 25%;
}
.box3 {
background-color: red;
left: 50%;
}
.box4 {
background-color: purple;
left: 75%;
}
&#13;
<div class="displaybox">
<div class="box box1">a</div>
<div class="box box2">b</div>
<div class="box box3">c</div>
<div class="box box4">d</div>
</div>
&#13;
相反,我可能会使用js动画(下面是一个简单的jQuery动画):
var $boxes = $('.box');
$boxes.hover(function() {
var $this = $(this);
$this.stop().css('z-index', 2).animate({ // change z-index before animation and animate width to 100 % and move to the left
width: '100%',
left: 0
});
},
function() {
// mouse out animation
var $this = $(this);
$this.stop().css('z-index', 2).animate({ // make highest z-index and shrink back to 25% moving left to original place
width: '25%',
left: $boxes.index($this) * 25 + '%'
}, function() {
$this.css('z-index', 1); // change z-index back after animation
});
});
&#13;
body {
background-color: grey;
margin: 0;
padding: 0;
}
.displaybox {
display:flex;
background-color: pink;
width: 100%;
height: 500px;
position: relative;
}
.box {
display: block;
position: absolute;
top: 0;
bottom: 0;
width:25%;
}
.box1 {
background-color: green;
left: 0;
}
.box2 {
background-color: blue;
left: 25%;
}
.box3 {
background-color: red;
left: 50%;
}
.box4 {
background-color: purple;
left: 75%;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="displaybox">
<div class="box box1">a</div>
<div class="box box2">b</div>
<div class="box box3">c</div>
<div class="box box4">d</div>
</div>
&#13;