在盘旋时显示两件事

时间:2014-12-25 09:54:29

标签: html css

我有一个标题,当我徘徊时,我希望它会显示两个不同的表格。那可能吗? 我想这个:

 #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;}

1 个答案:

答案 0 :(得分:2)

应该是这个

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