CSS hover显示元素交互的的键盘可访问性实例页面

效果：

栏目1	栏目2	删除
栏目1	栏目2	删除
栏目1	栏目2	删除

使用Tab键遍历，删除按钮会显示

代码：

CSS代码：

.btn {
    display: inline-block;
    padding: 2px 12px;
    background-color: #cd0000;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}
tr .btn {
    opacity: 0;
    filter: alpha(opacity=0);
}
tr:hover .btn,
tr .btn:focus {
    opacity: 1;
    filter: none;
}

HTML代码：

<table width="300">
  <tr>
    <td>栏目1</td>
    <td>栏目2</td>
    <td>
      <a href="javascript:" class="btn">删除</a>
    </td>
  </tr>
  <tr>
    <td>栏目1</td>
    <td>栏目2</td>
    <td>
      <a href="javascript:" class="btn">删除</a>
    </td>
  </tr>
  <tr>
    <td>栏目1</td>
    <td>栏目2</td>
    <td>
      <a href="javascript:" class="btn">删除</a>
    </td>
  </tr>
</table>