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>