非表示：focus if user：hover？

Question

私はline25 navigation tutorialに基づいて私のCSSにこれを持っています。

私はこの追加を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; 
} 

それとも、できるだけ早くあなたがリストの上にカーソルを置くと、焦点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; 
}