Question

我在页面中使用嵌套列表。示例 -

 - Parent1  
  - Child1
     - GrandChild1
     - Grandchild2
     - Grandchild3
  - Child2
     - Grandchild4
     - Grandchild5

我想单独为每个家庭成员使用li:hover { color:blue; }。但是，当我将鼠标光标移动到任何家庭成员时，所有家庭成员的颜色变为蓝色。怎么避免呢？请帮助。

Answer 1

尝试简单地给ul一个类并挂钩，例如：

ul.mylist li:hover {color:blue;}

您也可以

ul.mylist li ul li:hover {color:blue;}

您也可以使用第n个孩子/第一胎/最后一个孩子。

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

可能性是无穷无尽的，但只需做一遍

li:hover {color:blue;}

您正在引用每个li，而不管之前的标记。

Answer 2

好吧，我弄错了。我需要更多的R和D，但我做了一些这个js它并不完美，因为你可以看到我的小提琴，但工作一次

$(function(){
$('li').hover(function(){

    $(this).css({'color':'#00f'});
    $(this).parents().css({'color':'#000'});
    $(this).children().css({'color':'#000'});
},function(){
    $(this).css({'color':'#000'});
});
});

fiddle

Answer 3

这里有一些有用的信息here

ul:nth-child(2)
{
background:#ff0000;
}
ul:nth-child(3n)
{
background:#990099;
}

li:nth-child(4)
{
background:#00FF00;
}

A jsFiddle here

：nth-child（n）选择器匹配其父元素的第n个子元素，无论其类型如何。

n可以是数字，关键字或公式。

嵌套列表悬停问题

3 个答案: