以下这段代码，为什么鼠标离开黄色区域，后面的方块就不显示了，上下两个是可以的？请问下是什么原因
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
}
ul li,
ol li{
list-style:none;
}
header{
width:100%;
height:300px;
background:paleturquoise;
}
header ul{
width:1200px;
height:300px;
margin:auto;
background:pink;
position:relative;
}
header ul>li:nth-child(1){
width:100px;
height:100px;
background:red;
}
header ul>li:nth-child(2){
width:20px;
height:100px;
background:yellow;
}
header ul>li:nth-child(3){
width:100px;
height:100px;
background:green;
}
header ul li ol{
width:300px;
height:280px;
background:rgba(0,0,0,.5);
position:absolute;
top:0;
left:100px;
display:none;
}
header ul>li:hover ol{
display:block;
}
</style>
</head>
<body>
<header>
<ul>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
</ul>
</header>
</body>
</html>
正在回答 回答被采纳积分+1
同学你好，原因如下：
黄色盒子的宽度为20px，鼠标离开黄色区域时，不能直接进入右侧透明盒子，发生鼠标移出，右侧透明盒子被隐藏。
而上下两个盒子宽度为100px，与右侧透明盒子紧挨着，鼠标离开该区域时，直接就能进入右侧透明盒子，不会发生鼠标移出，右侧透明盒子也就不会被隐藏，如图
祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星