隐藏：焦点如果用户：悬停？

Question

我的css基于line25 navigation tutorial。

我将此添加内容添加到我的css中，并希望当用户将鼠标悬停在菜单图标上时，它会删除：焦点范围（图标文字说明）并且仅显示：此时悬停跨度文本。怎么能实现呢？

nav ul li a:focus span {
    display: block;
}

nav ul li a:hover span {
    display: block;
}

目前：悬停文字和：焦点文字互相混淆。

这是codepen on the exact thing。

Answer 1

你可以做的事情很多：

第一个想法：将：悬停在总是顶部，背景为纯色。

nav ul li a:hover span, nav ul li a:focus span {
  display: block;
  background: white;
  width: 100%;

}
nav ul li a:hover span {
  z-index: 1;
}

或者只要将鼠标悬停在列表上，就可以隐藏焦点：

nav ul:hover li a:focus span {
  display: none;
}
#navbar-lg ul li a:hover span, nav ul li a:focus span {
  display: block;
}