鼠标悬停a标签时显示容器（子菜单），CSS display规则失效求助

你的CSS选择器逻辑错误导致规则不生效：a:hover div 是用来选中a标签内部嵌套的div元素，但你的div是和a平级的兄弟元素，所以这个选择器无法匹配到目标div。

解决方案1：紧邻兄弟元素用+选择器 #

如果div是a的下一个紧邻兄弟，用相邻兄弟选择器+：

<a href="#" class="link">LINK</a>

<div>
    <h1>test</h1>
</div>

<style>
    div {display: none;}
    /* 选中.link的下一个紧邻div兄弟 */
    .link:hover + div {display: block;}
</style>

解决方案2：非紧邻兄弟元素用~选择器 #

如果a和div之间还有其他元素，用通用兄弟选择器~：

div {display: none;}
/* 选中.link之后所有的div兄弟 */
.link:hover ~ div {display: block;}

优化方案（适合子菜单场景） #

如果是做子菜单，建议把a和div放到同一个父容器里，用父容器的hover控制，这样鼠标移到子菜单上时不会消失：

<div class="menu-wrap">
    <a href="#" class="link">LINK</a>
    <div class="submenu">
        <h1>test</h1>
    </div>
</div>

<style>
    .submenu {display: none;}
    .menu-wrap:hover .submenu {display: block;}
</style>

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