我有一个 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();
最佳答案
使用您拥有的代码,执行此...
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 之外时,样式会重置。
关于javascript - 结合悬停和焦点选择器样式但不同时,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28369577/