gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-27 22:56:05 25 4
gpt4 key购买 nike

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

我尝试了什么:

每次我添加一个 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;
}

最佳答案

我希望我理解正确:

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

关于html - 如何使用 :hover? 为覆盖 div 设置动画?我需要 JS 还是可以在 CSS 中完成?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59239148/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com