行悬停时不显示锚标记

Question

<div class="container">
<div class="name">Jack</div>
<a href="#" class="modify">Edit</a>
</div>

.container .modify {display:none}
.container:hover .modify, .container:focus .modify{display:block}

当用户按下tab键焦点位于div容器上时，将显示编辑链接。但是，如果用户再次按Tab键而不是专注于编辑链接，则会再次隐藏编辑。我想如果焦点在div上，用户按下tab tab焦点应该在Edit链接上。

请关注http://jsfiddle.net/lakshya85chd/8Y74X/

Answer 1

如果显示无，则无法将鼠标悬停在其上，因此请使用隐藏可见性

.container .modify {visibility:hidden;}
.container .modify:hover, .container .modify:focus{visibility:visible;}