css - 为什么我的容器在鼠标移出时没有返回到悬停前的状态？

Question

我创建了一个 menu在悬停时滑入。

当我将鼠标移离菜单时，它不会返回到悬停前状态，即使我已经指定了容器的宽度和高度，所以鼠标移到外面的任何地方它都应该返回。

#menucontrol {  
width:500px;
height: 800px;
}
#menucontrol:hover #navdiv {    
left: 23px;
transition: all .3s ease-in-out;
opacity: 1.0; 
}
#menucontrol:hover #dashes {     
transform: rotate(360deg);  
transition: all .3s ease-in-out;
opacity: 0;
}
#navdiv {
position: absolute;
top: 68px;
left:-55px;
z-index:999999;
opacity: 0;
width: 555px;
transition: all .3s ease-in-out;    
}

Answer 1

发生这种情况的原因是您的#menucontrol div 占据了整个页面，除了您的 Logo 区域。我建议在您的#dashes id 上尝试使用 :hover psuedo 元素。我还注意到您的 z-indexes 设置在某些元素上而不是其他元素上。我认为这也可能会给您带来一些问题。如果没有看到您的 html，就很难复制和进行更改来帮助您解决此问题。