html - css关于发生元素重叠后2D转换的动作执行问题。
问题描述
1.问题情况：
本人前端小白一枚，正在学习html+css。正在学习css中有关2D变换的一些属性，因此想做一个翻转菜单来增强自己的理解。但是发现一个无法理解的现象，特来请教大神们。具体问题下图：
动作为鼠标移动到一级菜单后对应的二级菜单显示。（visibility属性从hidden变为visible）
此时将鼠标移动到1所示位置，2处此时没有元素（即此时无元素重复），该列二级菜单没有收回。
此时鼠标仍移动到1位置，2位置此时已经添加一个div，因为此时还未对二级菜单设置position属性，未脱离文档流，所以有元素重叠。觉得奇怪的现象出现了：当鼠标焦点在文本时，二级菜单没有收回，但当鼠标焦点在二级菜单时（因为设置为a标签，所以此时鼠标会变成手势），二级菜单反而收回了！对这个结果我是有点懵的。。。。要是反过来我倒还能接受了。。
真心求教各位大神答疑解惑了！
2.代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2D综合练习-翻转菜单</title>
<style>
/*企业开发不推荐如此写法*/
* {
margin: 0;
padding: 0;
}
.box1 {
margin: 0 auto;
margin-top: 100px;
width: 400px;
height: 300px;
border: 1px solid #ccc;
box-sizing: border-box;
}
.content {
width: 400px;
height: 260px;
background-color: #a7ffff;
}
ul li {
list-style: none;
}
/*一级菜单样式*/
.first-menu {
width: 400px;
height: 40px;
background-color: #a7ffff;
/*margin:0 auto;*/
}
.first-menu > li {
width: 120px;
height: 40px;
text-align: center;
line-height: 40px;
background-color: #ffb2a2;
float: left;
margin-left: 10px;
/*position: relative;*/
}
/*二级菜单样式*/
.second-menu {
/*为了重现这种情况，先将定位属性注释掉*/
/*position: absolute;*/
/*left: 0;*/
/*top: 40px;*/
}
.second-menu li {
width: 120px;
height: 40px;
line-height: 40px;
background-color: #ccc;
text-align: center;
transform: rotateY(180deg);
transition: all 1s;
visibility: hidden;
opacity: 0;
}
/*二级菜单展现样式*/
.first-menu > li:hover .second-menu li {
/*height: 40px;*/
transform: none;
visibility: visible;
opacity: 1;
}
.first-menu > li:hover .second-menu li:nth-child(1) {
transition-delay: 0ms;
}
.first-menu > li:hover .second-menu li:nth-child(2) {
transition-delay: 200ms;
}
.first-menu > li:hover .second-menu li:nth-child(3) {
transition-delay: 400ms;
}
.first-menu > li:hover .second-menu li:nth-child(4) {
transition-delay: 600ms;
}
.first-menu > li:hover .second-menu li:nth-child(5) {
transition-delay: 800ms;
}
/*二级菜单收回样式*/
.first-menu > li .second-menu li:nth-child(1) {
transition-delay: 800ms;
}
.first-menu > li .second-menu li:nth-child(2) {
transition-delay: 600ms;
}
.first-menu > li .second-menu li:nth-child(3) {
transition-delay: 400ms;
}
.first-menu > li .second-menu li:nth-child(4) {
transition-delay: 200ms;
}
.first-menu > li .second-menu li:nth-child(5) {
transition-delay: 0ms;
}
a {
display: block;
width: 120px;
height: 40px;
background-color: #3fff6c;
}
</style>
</head>
<body>
<div class="box1">
<ul class="first-menu">
<li>
一级菜单
<ul class="second-menu">
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li>
一级菜单
<ul class="second-menu">
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li>
一级菜单
<ul class="second-menu">
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
</ul>
<div class="content">
我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
</div>
</div>
</body>
</html>要是能在其他方面也提点一二，更是在此感激不尽啦！~
第一次提问，新手上路，好紧张啊~~~~
是由于你设置的transform: none;导致的，你可以试试transform: rotateY(0deg);
更新：一个默认的html的transform属性为none，当不为none的时候会产生层叠上下文。
因为你设置了一级菜单的高度为40px，所以当你hover的时候，虽然二级菜单出现了，但是实际上超出了一级菜单的范围，所以，会和下面的堆叠起来，当二级菜单刚出现时由于是transform: rotateY(180deg);产生层叠上下文，所以会在下面 content内容的上面，当变为 transform: none; 时，层叠上下文消失，则层级低于content，所以会重叠。
还有其他的一些css也会有此作用。推荐MDN了解一下：The stacking context
这篇关于html - css关于发生元素重叠后2D转换的动作执行问题。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
