hover与延时显示实例页面

展示

代码

• HTML：

  <table>
      <tr>
        <th scope="col">标题1</th>
        <th scope="col">标题2</th>
        <th scope="col" width="40">操作</th>
      </tr>
      <tr>
        <td>内容1</td>
        <td>内容2</td>
        <td><a href class="icon-delete" data-title="删除">删除</a></td>
      </tr>
      <tr>
        <td>内容3</td>
        <td>内容4</td>
        <td><a href class="icon-delete" data-title="删除">删除</a></td>
      </tr>
  </table>

• CSS：

  /* 非关键代码参见页面源代码 */
  .icon-delete {
      /* ... */
  }
  .icon-delete::before {
      /* ... */
  }
  .icon-delete::after {
      /* ... */ 
  }
  /* 关键CSS  */
  .icon-delete::before,
  .icon-delete::after {
      transition: visibility 0s .2s;
      visibility: hidden;
  }
  .icon-delete:hover::before,
  .icon-delete:hover::after {
      visibility: visible;
  }