html - 悬停时显示两件事

Question

我有一个标题，当我悬停时，我希望它会显示两个不同的表格。那可能吗？我试试这个:

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

但这只显示了#arijslievefototable。

我在 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>
    <tr>
        <td>    </td>
    </tr>
    <tr>
        <td>    </td>
    </tr>
    <tr>
        <td> E-mail: </td>
    </tr>
    <tr>
        <td> jenskemeert@hotmail.com </td>
    </tr>
    </table>

<table id="arijslievefototable">
    <tr>
        <td> <img  src="lieve_arijs.jpg" alt="lieve_arijs" width=100 height=100 /> </td>
    </tr>
    </table>

和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: 810px; position: absolute; top: 701px; left: 273px; display: none; }

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


#arijslievefototable{ background: #333; width: 1px; position:absolute; top: 701px; left: 976px; display: none;}

Answer 1

应该是这个

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