Question

我有一个列表，每个都有悬停状态的CSS。默认情况下，每个项目都是黑色，并且通过悬停变为蓝色。 我的问题：我希望第一项在加载页面之前悬停。一旦用户徘徊其他项目，第一个项目就不再是蓝色，就像其他普通项目一样，只有通过悬停才能变成蓝色。

这是我的jsfiddle。

HTML：

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

的CSS：

ul li:hover {
    color:blue;
}

Answer 1

您无法将:hover样式应用于当前未处于悬停状态的内容。但您可以使用类：

将相同的样式应用于所选项目

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

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

Answer 2

<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 3

如果您只想以相反的方式设置第一个<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 4

试试此链接，它可能适合您。

http://www.w3schools.com/css/tryit.asp?filename=trycss_link

我怎么能默认悬停样式？

4 个答案: