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

Question

我有一个 ul，其中的列表项在悬停或聚焦时会突出显示。但是，如果有一个被悬停而另一个被聚焦，那么我只希望悬停的 li 改变样式，而聚焦的元素样式返回默认值。这可能吗？这是一个 demo .谢谢。

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 在说什么？

• 将任何具有 :focus 的列表项设置为黄色背景。
• 当您将鼠标悬停在父 UL 上时，将所有 li 设置为没有背景。
• 将鼠标悬停在单个 LI 上时，将背景设置为黄色。
• 当您将鼠标悬停在 UL 之外时，样式会重置。

JS Fiddle