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>

CSS 悬停时显示 div

CSS show div on hover

html

hover