如何在焦點元素上使用懸停規則？

這是我的代碼：如何在焦點元素上使用懸停規則？

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

當我點擊了a它background-color正在改變inherit，我就可以再次懸停鼠標，它的background-color是不會改變到#112542，直到我不在外面a任何地方點擊（，因爲它仍然有重點和background-color: inherit;）。是否有解決方案，我可以改變它的background-color而不點擊它外面並再次懸停鼠標？

來源

2017-04-14 Rohit Sharma

您可以: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>

來源

2017-04-14 11:50:44

我已經用它。但是當單擊'a'時，'background-color'正在'＃112542'，直到我不從中移除焦點。 –

在這個例子中，當你點擊'a'時，背景是'＃112542'，因爲你在點擊時將它懸停。如果你移動你的光標而不點擊外部，它仍然有焦點（和繼承背景），如果你把它懸停在外面，你可以看到'：focus：hover'效果我改變了我的例子中的顏色以顯示差異 –

我真的很抱歉，它肯定會工作..！我沒有像你那樣嘗試過。 –

如何在焦點元素上使用懸停規則？

回答

相關問題