フォーカスを当てた要素にホバールールを使用するには？

Question

これは私のコードです：

.metismenu li a:hover{ background:#112542;} /*would not affect when it has focus*/ 
.metismenu li a:focus{ background:inherit;} 

私はそれがbackground-colorがinheritに変化していると私はそれに再びマウスを移動していますaをクリックしたときに、それは私がどこでも外aをクリックしていない午前までbackground-colorが#112542に変更されていないのです（）、まだフォーカスがあり、background-color: inherit;です。 background-colorを外してマウスをもう一度クリックしなくても変更できる解決策はありますか？

Answer 1

あなたは、この例のように、:focus:hover状態で試すことができます：私はそれを使用しているSee this fiddle

.metismenu li a:focus:hover{ background:yellow;} 

.metismenu li a:hover{ background:#112542;} 
 
.metismenu li a:focus{ background:inherit;} 
 
.metismenu li a:focus:hover{ background:yellow;}

<div class="metismenu"> 
 
    <ul> 
 
    <li><a href="#!">link test</a></li> 
 
    </ul> 
 
</div>