如何在焦点元素上使用悬停规则？

这是我的代码：如何在焦点元素上使用悬停规则？

.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'效果我改变了我的例子中的颜色以显示差异 –

我真的很抱歉，它肯定会工作..！我没有像你那样尝试过。 –

如何在焦点元素上使用悬停规则？

回答

相关问题