如何使用 :hover 为叠加层 div 设置动画？我需要 JS 还是可以在 CSS 中完成？

Question

我想要实现的目标： 当鼠标在一个颜色部分上滚动时，该特定颜色部分滑动并覆盖其他三个部分，显示更多内容。

我试过的：

每次我添加一个 div 它都会影响前一个 div 因为它的父级。

如果 div 在没有父级的情况下添加，结果是每个 div 动画独奏。

也许我处理这个问题的方式不对。我需要 javascript 将每个隐藏在 dividual div 中吗？实现这一目标的最佳方法是什么？谢谢

这是我目前所拥有的代码笔： https://codepen.io/habsqrd/pen/WNbrNLL

这是正文：

<div class="center">
    <div class="one">
        <div class="two">
            <div class="three">
                <div class="four">
                </div>
            </div>
        </div>
    </div>
</div>

CSS:

body
{
  background-color: #d6d6d6;
  margin: auto;
}

.center {

}

.one {
  position: absolute;
  margin: auto;
  background-color:rgb(94, 226, 94);
  width: 90%;
  height: 90%;
  { transition: all .2s ease-in-out; }

}

.one:hover {
    position: absolute;
    background-color:rgb(6, 179, 6);
    width: 90%;
    height: 90%;
    z-index: 4;
    transition: all .2s ease-in-out;
  }

.two {
    position: absolute;
    background-color:rgb(247, 82, 82);
      width: 75%;
    height: 100%;
    z-index: 1;

  }

.three {
    position: absolute;
    background-color:rgb(86, 86, 255);
    width: 50%;
    height: 100%;
    z-index: 2;
  } 


.four {
  position: absolute;
  background-color:rgb(240, 240, 96);
  width: 25%;
  height: 100%;
  z-index: 3;
}

Answer 1

希望我理解正确：

https://codepen.io/shahry4r/pen/yLyeyGV

<!DOCTYPE html>
<html lang="en">

 <link rel="stylesheet" type="text/css" href="styles.css">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <div class="center">
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div> 
      <div class="four"></div>
    </div>


</body>
</html>

CSS

body
{
  background-color: #d6d6d6;
  margin: auto;
}

.center {

}

.one {
  display: inline-block;
  background-color:rgb(94, 226, 94);
  width: 25%;
  height: 100%;
  position: absolute;
  left:auto;  
  { transition: all .2s ease-in-out; }

}

.one:hover {
    position: absolute;
    background-color:rgb(6, 179, 6);
    width: 100%;
    z-index: 4;
    transition: all .2s ease-in-out;
  }

.two {
      display: inline-block;
      background-color:rgb(247, 82, 82);
      width: 25%;
      height: 100%;
      position: absolute;
      left:25%;  
      z-index: 1;

  }

.two:hover {
    position: absolute;
    background-color:rgb(247, 82, 82);
    width: 100%;
    z-index: 4;
    left:0%;
    transition: all .2s ease-in-out;
  }


.three {
  display: inline-block;
  background-color:rgb(86, 86, 255);
  width: 25%;
  height: 100%;
  position: absolute;
  left:50%;
} 


.four {
  display: inline-block;
  background-color:rgb(240, 240, 96);
  width: 24%;
  height: 100%;
  left: 75%;  
  position: absolute;
}

如何使用 :hover 为叠加层 div 设置动画？我需要 JS 还是可以在 CSS 中完成？

How can I animate an overlayed div with :hover? Do I need JS or can it be done in CSS?

html

css

overlay

hover