我有一个标题,当我将鼠标悬停时,它将显示两个不同的表。那可能吗?我整理了一个:
#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> [email protected] </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;}
应该是这个
#ArijsLieve:hover ~ #arijslievetable,
#ArijsLieve:hover ~ #arijslievefototable { display: block; }
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句