扩展div并覆盖其他div

Question

任何人都可以帮我弄清楚如何做到这一点。我在悬停时尝试扩展div，但是我无法从中心扩展它为b和c div，并且d从右边扩展，并且我尝试在展开时覆盖另一个div而不是推动它。

transform:scale()方法无法使用，因为我稍后会用图片更改背景。我也试图避免使用jQuery。提前谢谢。

＆＃13;

＆＃13;

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

＆＃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;

＆＃13;

＆＃13;

Answer 1

解决方案是使用伪元素溢出来动画背景：

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>

Answer 2

您可以通过绝对定位实现效果。将左侧和右侧值设置为0将使div扩展到边缘。我在左右值上使用百分比而不是25％的宽度，我必须在悬停状态下放置一个更高的z-index值，以使当前div立即跳到前面。

＆＃13;

＆＃13;

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;

＆＃13;

＆＃13;

Answer 3

你可以用css过渡做到这一点，但我认为鼠标输出动画很差，因为它太早失去它的z-index（所以你看不到右侧动画向后）：

＆＃13;

＆＃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%;
  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;

＆＃13;

＆＃13;

相反，我可能会使用js动画（下面是一个简单的jQuery动画）：

＆＃13;

＆＃13;

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;

＆＃13;

＆＃13;