H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【CSS】求解关于伪类和visibility的问题

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

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

本文地址:H5W3 » 【CSS】求解关于伪类和visibility的问题

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址