visibility与内容hover的延时显示实例页面

展示

代码

• HTML：

  <table>
    <tr>
      <td>栏目1</td>
      <td>栏目2</td>
      <td>
        <a href>操作▾</a>
        <div class="list">
          <a href>编辑</a>
          <a href>删除</a>
        </div>
      </td>
    </tr>
    <tr>
      <td>栏目1</td>
      <td>栏目2</td>
      <td>
        <a href>操作▾</a>
        <div class="list">
          <a href>编辑</a>
          <a href>删除</a>
        </div>
      </td>
    </tr>
  </table>

• CSS：

  td a {
    display: block;
  }
  .list {
    width: 80px;
    position: absolute;
    visibility: hidden;
    border: 1px solid #ccc;
    background: #fff;
  }
  td:hover .list {
    visibility: visible;
    transition: visibility 0s .2s; 
  }
  .list a {
    padding: 5px 10px;
    color: #333;
  }
  .list a:hover {
    background-color: #f5f5f5;
  }