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>

- i5dogdgg

---

“~”是兄弟选择器，但两个元素不是兄弟关系...请展示完整的HTML标记以显示这些元素之间的关系。 - pavel

好的。嗯，它们不是兄弟姐妹。我怎么能完成这个任务？ - i5dogdgg

CSS 只能选择（下一个）兄弟和子元素。在其他情况下，需要使用 JS，或者...展示您拥有的 HTML 标记，也许我们可以找到任何解决方案。 - pavel

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>

- Joel Peltonen

---

是的，那个片段并不完美也不合法，但它证明了这一点。另外，楼主请注意，您混淆了header_under类和ID标记，它们也需要正确。 - Joel Peltonen

你准备了漂亮的标记，但两个元素不是兄弟节点。 - pavel

@panther 这就是我的全部观点。如果没有它们作为兄弟元素，你无法做到这一点。你不能编辑你的HTML吗？你从未展示过你的完整层次结构，也从未说过你不能改变它。个人认为，这不是一个很好的悬停内容的方法。 - Joel Peltonen