Question

这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <title>list</title>
    <style type="text/css">
        li.mainList:hover li.childList{
            color:red;
        }

    </style>
</head>
<body>
<ul>
    <li class="mainList">111</li>   
    <li>111
        <ul>
            <li class="childList">222</li>
            <li class="childList">222</li>
        </ul>
    </li>       
    <li>111</li>    
    <li class="mainList">111</li>       
</ul>

</body>
</html>

每当用户将鼠标悬停在主列表的第一个子节点和最后一个子节点上时，我想更改嵌套列表项的颜色。为什么我的上面的代码不起作用，你的第一个孩子（最后一个孩子）选择器的建议是什么？

Answer 1

为什么我的上述代码不起作用

因为您使用了后代组合子，并且嵌套列表不是被悬停的元素的后代。

您对第一胎（最后一个孩子）选择器的建议是什么

不使用它们。

你不能走回树上去悬停在最后一个孩子身上，以便使用CSS影响其之前兄弟姐妹的后代。

使用JavaScript（鼠标悬停监听器）代替。

Answer 2

因为您没有正确使用选择器。从您的标记中，这应该可行。

li.mainList:hover + li li.childList{
            color:red;
        }

Here是工作小提琴。

带有类名的条件悬停

2 个答案: