使用opacity与absolute实现下拉菜单：父容器hover无响应问题求助

你的代码问题出在CSS选择器使用错误，以下是修正后的完整代码：

修正后的CSS #

.child {
    background-color: blue;
    height: 200px;
    position: absolute;
    top: 50px;
    opacity: 0;
    /* 可选：添加过渡动画让显示更平滑 */
    transition: opacity 0.3s ease;
}
 
.parent {
    position: relative;
    /* 给父容器加高度和背景，方便测试悬停区域 */
    height: 50px;
    background-color: #eee;
}

/* 使用后代选择器，选中parent下的child元素 */
.parent:hover .child {
    opacity: 1;
}

修正后的HTML #

<html>
    <body>
        <div class="parent">
            <div class="child"></div>
        </div>
    </body>
</html>

问题说明 #

你原来用的.parent:hover + .child是相邻兄弟选择器，它只会选中和.parent同级且紧挨着的下一个.child元素。但你的.child是.parent的子元素，属于后代关系，因此需要用后代选择器（通过空格分隔两个选择器）来匹配，也就是.parent:hover .child。

给.parent添加高度和背景色是为了直观显示悬停区域，你可以根据实际需求调整样式。

内容的提问来源于stack exchange，提问作者John Paul