结合悬停和焦点选择器样式,但不是同时

Question

我有一个ul列表项目,当它们悬停或聚焦时会突出显示.然而,如果有一个悬停而另一个被聚焦,那么我只希望悬停li改变样式和聚焦元素样式返回默认值.这可能吗？这是一个演示.谢谢.

CSS

li:hover,li:focus{
    background-color:yellow;
    cursor:pointer; 
}

HTML

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li> 
</ul>

JS

$('li').attr('tabindex','0').focus();

Answer 1

使用您拥有的代码,执行此操作...

li:focus{
    background-color:yellow;
    cursor:pointer;
    outline: none;
}

ul:hover > li:focus {
    background: none;
    cursor: default;
}

ul:hover > li:hover {
    background: yellow;
    cursor: pointer;
}

什么是CSS说的？

• 设置任何列表项:焦点为黄色背景.
• 将鼠标悬停在父级UL上时,将所有li设置为无背景.
• 将鼠标悬停在单个LI上时,将背景设置为黄色.
• 当您将鼠标悬停在UL之外时,样式将重置.

JS小提琴