Html 如何使用：hover设置覆盖div的动画？我需要JS还是可以在CSS中完成？_Html_Css_Hover_Overlay

Html 如何使用：hover设置覆盖div的动画？我需要JS还是可以在CSS中完成？

html css

Html 如何使用：hover设置覆盖div的动画？我需要JS还是可以在CSS中完成？,html,css,hover,overlay,Html,Css,Hover,Overlay,我试图实现的目标：当鼠标在颜色部分上滚动时，该特定颜色部分将滑动并覆盖其他三个部分，显示更多内容我的尝试：每次我添加一个div时，它都会影响上一个div，因为它是父div 如果添加了一个没有父级的div，则结果是每个div都单独设置了动画也许我的方法不对。我是否需要javascript来隐藏每个单独的div？实现这一目标的最佳方式是什么？多谢各位这是我目前拥有的代码笔：以下是正文： <div class="center"> <div class="one"&

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

我的尝试：

每次我添加一个div时，它都会影响上一个div，因为它是父div

如果添加了一个没有父级的div，则结果是每个div都单独设置了动画

也许我的方法不对。我是否需要javascript来隐藏每个单独的div？实现这一目标的最佳方式是什么？多谢各位

这是我目前拥有的代码笔：

以下是正文：

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

我希望我能正确地理解你：


文件
CSS
身体
{
背景色：#D6；
保证金：自动；
}
.中心{
}
.一{
显示：内联块；
背景色：rgb（9422694）；
宽度：25%；
身高：100%；
位置：绝对位置；
左：自动；
{转换：所有.2易入易出；}
}
1.悬停{
位置：绝对位置；
背景色：rgb（6179,6）；
宽度：100%；
z指数：4；
转换：所有.2易入易出；
}
.二{
显示：内联块；
背景色：rgb（247,82,82）；
宽度：25%；
身高：100%；
位置：绝对位置；
左：25%；
z指数：1；
}
.2：悬停{
位置：绝对位置；
背景色：rgb（247,82,82）；
宽度：100%；
z指数：4；
左：0%；
转换：所有.2易入易出；
}
.三{
显示：内联块；
背景色：rgb（86,86,255）；
宽度：25%；
身高：100%；
位置：绝对位置；
左：50%；
} 
.4{
显示：内联块；
背景色：rgb（240、240、96）；
宽度：24%；
身高：100%；
左：75%；
位置：绝对位置；
}

特定颜色部分将滑动并覆盖其他三个部分，显示更多内容。

这是什么意思？如果鼠标悬停在一种颜色上，该颜色将占据整个网页。

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

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