html - 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>