search

Home  >  Q&A  >  body text

html - 求解关于伪类和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>


<p>

    <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>
 
  </p>


</body>
</html>
迷茫迷茫2787 days ago558

reply all(1)I'll reply

  • ringa_lee

    ringa_lee2017-04-17 11:11:11

    The css selector is used incorrectly

    cssa:hover table{
   visibility: visible;
}

    represents a ancestor element that is a a element, and the a element whose status is hover is visible. table For your html, the
    element is the atable sibling element of the element and should be: 

    cssa:hover + table{
   visibility: visible;
}

    reply
    0
  • Cancelreply