时间戳

首页 > 解决方案 > 如何使用 :hover 为覆盖的 div 设置动画？我需要 JS 还是可以在 CSS 中完成？

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

问题描述

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

我尝试了什么：

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

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

也许我以错误的方式接近这个。我需要 javascript 来隐藏每个单独的 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;
}

标签： htmlcsshoveroverlay

解决方案

我希望我能正确理解你：

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

推荐阅读