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

CSS代码：

.list {
    width: 80px;
    position: absolute;
    visibility: hidden;
    border: 1px solid #ccc;
    background: #fff;
}
.trigger {
    display: inline-block;
}
.trigger:hover + .list,
.trigger:focus + .list {
    visibility: visible;
}
.list a {
    display: block;
    padding: 5px 10px;
    color: #333;
}
.outline {
    outline: 1px dotted Highlight;
    outline: 5px auto -webkit-focus-ring-color;
}

HTML代码：

<a href="javascript:" class="trigger" data-target="list">更多操作▾</a>
<div id="list" class="list">
    <a href="javascript:">编辑</a>
    <a href="javascript:">删除</a>
</div>