首页 > 开发 > CSS > 正文

求解关于伪类和visibility的问题

2017-09-12 09:39:24  来源: 网友分享

想把鼠标悬停在“用户”上时表格会显现出来,可是为什么以下代码不能实现?到底哪里错了好烦躁呀!

html<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>     table{         visibility: hidden;     }      a:hover table{        visibility: visible;     }    </style></head><body><div>    <a href="">用户</a>    <table>        <tr>            <td>                <a href="">好友</a>            </td>        </tr>        <tr>            <td>                <a href="">关注</a>            </td></tr>        <tr>            <td>                <a href="">设置</a>            </td>        </tr>        <tr>            <td>                <a href="">消息</a>            </td>        </tr>    </table>   </div></body></html>

解决方案

css选择器用错了

cssa:hover table{   visibility: visible;}

表示一个祖先元素的是a元素,且该a元素状态为hovertable 元素是可见的。
对于你的html, a元素是 table 元素的兄弟元素,应该是:

cssa:hover + table{   visibility: visible;}