jquery - 默认情况下如何设置悬停样式？

Question

我有一个列表，每个列表都有悬停状态的 css。默认情况下，每个项目都是黑色的，悬停会变成蓝色。 我的问题：我希望第一个项目是蓝色的，甚至在通过加载页面悬停之前。一旦用户悬停其他项目，第一个不再是蓝色的，就像其他正常项目一样，只有通过悬停才会变成蓝色。

这是我的jsfiddle。

html:

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

CSS：

ul li:hover {
    color:blue;
}

Answer 1

<ul>
    <li class="active">one</li>
    <li>two</li>
    <li>three</li>
</ul>

<style>
ul li:hover, ui li.active {
    color:blue;
}
</style>

<script>
$('ul').hover(function(){ $('ul li').removeClass('active'); } , function(){});
</script>

Answer 2

如果您只对以<li>相反方式设置第一个样式感兴趣，则可以使用:first-child伪类：

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

 

ul li:first-child,
ul li:hover {
    color: blue;
}

ul li:first-child:hover {
    color: black;
}

jsFiddle

否则，我建议遵循建议的基于类的方法。

Answer 3

您不能将:hover样式应用于当前未处于悬停状态的内容。但是您可以使用类将相同的样式应用于所选项目：

<ul>
    <li class="selected">one</li>
    <li>two</li>
    <li>three</li>
</ul>

ul li:hover, ul li.selected {
    color:blue;
}