Question

我有一个无序的项目列表，这些项目通过:nth-child(even)以背景颜色交替显示。当鼠标通过:hover

悬停在项目上时，项目也会以不同的背景颜色突出显示

我需要能够指定项目，以便它们保持交替的背景颜色，但在悬停时不会突出显示。

我无法找到办法做到这一点。

Answer 1

好的，所以听起来（从下面的评论中）就像你想要一个没有悬停的课程，但仍然保持交替的背景。

最简单的方法是简单地定义一个类并将其从悬停css中排除，如下所示：

ul li:not(.special):hover {
    background-color:blue;
}

这将使悬停应用于除“特殊”类之外的所有内容。

Working fiddle

Answer 2

将悬停样式添加到nth-child（偶数），就像这样

ul li:nth-child(even) {
    background-color: grey;
}

看到更新的小提琴。 http://jsfiddle.net/kjk8L/5/

Answer 3

我就是这样做的，希望这会有所帮助。

ul li:nth-child(even) {
    background-color: #efffef;
}

ul li:nth-child(even):hover {
    background-color: #dfd;
}

/* you can skip styling of the odd children if you don't want to */
ul li:nth-child(odd) {
    background-color: #efefff;
}

ul li:nth-child(odd):hover {
    background-color: #ddf;
}

CSS删除：悬停属性

3 个答案: