CSS 在悬停时显示 div

Question

这是我的 CSS

.header_under{
    display: none;
    width: 300px;
    height: 150px;
    float: left;
    background: red
}
.show:hover ~ .header_under{
    display: block;
}

所以我想要的是“header_under”在悬停时出现在网站上。但似乎不起作用

HTML：

<li class="show"><a href='#'><span>Games4u</span></a></li>

和

<div class="bildspel">
    <div id="header_under"></div>
</div>

Answer 1

您的 HTML 的结构需要与 CSS 相匹配，这样它才能工作。

波形符 (~) 运算符需要与目标有同级连接：

#header_under{
    display: none;
    width: 300px;
    height: 150px;
    background: red
}
.show:hover ~ #header_under{
    display: block;
}

<ul>
    <li class="show">
        <a href='#'><span>Games4u</span></a>
    </li>
    <div id="header_under">dasasdadssad</div>
</ul>