社区
我尝试用HTML和CSS制作一种覆盖菜单。
我的想法是：当我的鼠标悬停在粉色矩形上时，一个动画显示蓝色框，然后另一个动画则显示红色框。它就像一个"双"下拉菜单。
我的HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Visualization</title>
</head>
<body>
<div id="stats-dropdown">
<div id="stats-title"><span>Rendering statistics</span></div>
<div id="stats">
<div>Number of Instances : 50</div>
<div>Number of Surfaces : 1200</div>
<div>Number of Patches : 5000</div>
<div>Number of Elements : 10000</div>
<div>Number of Vertices : 30000</div>
<div>Running time : 50 ms</div>
</div>
</div>
</body>
</html>
我的CSS:
body,
html {
padding: 0;
margin: 0;
}
#stats-dropdown {
position: absolute;
top: 20px;
left: 20px;
font-size: larger;
font-family: 'Courier', Arial, monospace;
font-weight: bold;
color: black;
background-color: palevioletred;
height: 40px;
width: 20px;
}
#stats-title {
background-color: teal;
width: 350px;
height: 40px;
margin-left: 20px;
display: flex;
white-space: nowrap;
overflow: auto
}
#stats-title > span {
margin: auto;
}
#stats {
height: 200px;
margin-left: 20px;
background-color: tomato;
display: flex;
flex-direction: column;
justify-content: space-evenly;
text-align: center;
}
#stats-dropdown #stats {
height: 0px;
overflow: hidden;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out 0.5s;
}
#stats-dropdown #stats-title {
width: 0px;
overflow: hidden;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#stats-dropdown:hover #stats {
height: 200px;
width: 350px;
}
#stats-dropdown:hover #stats-title {
height: 40px;
width: 350px;
}
我的问题是，在"关闭"动画过程中，红色框消失而没有动画，有时我注意到，尽管过渡延迟，红色框也可以出现在蓝色框之前。
如果你想尝试一下，这里有一个JSFiddle。
你能帮我解决我的问题吗？
我在Firefox上运行这个(不知道这是否重要(。
仍然可以看到红框立即消失，但我解决了红框出现在标题框之前的问题：
#stats {
height: 200px;
margin-left: 20px;
background-color: tomato;
transition-delay: 0.5s;
display: flex;
flex-direction: column;
justify-content: space-evenly;
text-align: center;
}
主要的区别是transition-delay: 0.5s;延迟了转换0.5s，即标题出现所需的时间。但是，关于红盒子的立即消失，我仍在工作。。。很抱歉回复了一半，我会努力解决这个问题，一找到答案就会添加。我希望这么多能弥补延误。
好的，请根据您的查询检查我试图完成的任务。我添加了几行，请检查。#stats中的position: absolute; top: 100%;
#stats-dropdown {
position: absolute;
top: 20px;
left: 20px;
font-size: larger;
font-family: 'Courier', Arial, monospace;
font-weight: bold;
color: black;
background-color: palevioletred;
height: 40px;
width: 20px;
}
#stats-title {
background-color: teal;
width: 350px;
height: 40px;
margin-left: 20px;
display: flex;
white-space: nowrap;
overflow: auto;
}
#stats-title>span {
margin: auto;
}
#stats-dropdown #stats-title {
width: 0px;
overflow: hidden;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#stats-dropdown:hover #stats-title {
height: 40px;
width: 350px;
}
#stats {
height: 200px;
width: 350px;
margin-left: 20px;
background-color: tomato;
display: flex;
flex-direction: column;
justify-content: space-evenly;
text-align: center;
height: 0px;
overflow: hidden;
position: absolute;
top: 100%;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
;
}
#stats-dropdown:hover #stats {
height: 250px;
width: 350px;
}<div id="stats-dropdown">
<div id="stats-title"><span>Rendering statistics</span></div>
<div id="stats">
<div>Number of Instances : 50</div>
<div>Number of Surfaces : 1200</div>
<div>Number of Patches : 5000</div>
<div>Number of Elements : 10000</div>
<div>Number of Vertices : 30000</div>
<div>Running time : 50 ms</div>
</div>
</div>