Question

我使用display: none;隐藏了我的表格现在我想让它显示在display:block;但是它不起作用。

这是我在css中的代码：

#ArijsLieve{
    background: #333;
    color: white;
    width: 100px;
    text-align: center;
    position: relative;
    top: -300px;
    left: 265px;
    cursor: pointer;
}        
#arijslievetable{
    background: #333;
    color: white;
    width: 200px;
    position: absolute;
    top: 701px;
    left: 273px;
    display: none;
}
#ArijsLieve:hover #arijslievetable{ display: block; }

我的HTML代码：

<div id="ArijsLieve">
<h3> Arijs Lieve </h3>
</div>

<table id="arijslievetable">
    <tr>
        <td> Kleuters 3j woensdag </td>
    </tr>
    <tr>
        <td> Kleuters 4j woensdag </td>
    </tr>
    <tr>
        <td> Kleuters 5j woensdag </td>
    </tr>
    <tr>
        <td> Team acro competitie </td>
    </tr>

Answer 1

该表是div的相邻兄弟，而不是它的后代。

您需要一个相邻的兄弟组合子（+）而不是后代组合子（）。

此外，表格应为display: table而不是display: block。

Answer 2

尝试兄弟选择器：

#ArijsLieve:hover ~ #arijslievetable{ display: block; }

Answer 3

试试这个#ArijsLieve:hover + #arijslievetable{ display: block; } 如果您希望能够将鼠标悬停在#ArijsLieve上，则应删除top:-300px

Answer 4

您可能需要使用Javascript并需要操作。所以在点击时你会想要显示我假设的表格。这是一个很好的资源：JavaScript onClick addClass

发生的事情就是当你说显示无它隐藏它时你需要Javascript用另一个读取显示块的类替换该类。

希望这有帮助。

CSS显示：块不起作用

4 个答案: