将悬停效应应用于多个li

Question

我跟随ul关注5 li。

现在有一种方法可以将不同的悬停效果应用于每个li ，而不会向id

提供li

<ul class="navigate">
       <li>One</li>
       <li>two</li>
       <li>Three</li>
       <li>Four</li>
       <li>Five</li>
 </ul>

或者我有必要给每个li ???

ID/Class

Answer 1

您可以使用：nth-​​child（）选择器将不同的悬停效果应用于每个li元素。

http://www.w3schools.com/cssref/sel_nth-child.asp

示例

ul.navigate li:hover:nth-child(1) {
   background: black;
}

ul.navigate li:hover:nth-child(2) {
   background: red;
}

依旧......

Answer 2

你甚至可以只使用css：

li:nth-child(1){color: 'red';}
li:nth-child(2){color: 'blue';}
li:nth-child(3):hover{color: 'red';}

/*and like so*/

在使用nth-child选择器之前，请检查以确保浏览器兼容性：http://caniuse.com/css-sel3

但是，如果你给他们唯一的id，那么这也是适用于旧浏览器的最佳实践。

Answer 3

jquery对此没有必要。 怎么样：css中的nth.child属性？

CSSTricks - :nth-child(n)

W3C - :nth-child(n)

但如果你真的想用jQuery看看这个

jQuery - :nth-child(n)

Answer 4

在jQuery中

$('.navigate li').eq(x).css(...); // with x from 0 to 4

或

$('.navigate li').eq(x).hover(function(){},function(){});