Question

我有一个嵌套列表，我希望在它们悬停时为行添加样式。但我不想徘徊父母＆＃34; LI＆＃34;。我在＆＃34; li＆＃34; s中有随机元素，因此我无法引用子元素，这些列表元素是组。

示例HTML：

<ul>
    <li>
        <ul>
            <li>
                <ul>
                    <li></li>
                     <li></li>
                     <li></li>
                </ul>
            </li>
            <li>
                <ul>
                    <li></li>
                    <li></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS：

ul {
    list-style: none;
    padding: 0;
}
ul li {
    background-color: #EEE;
    padding: 10px;
    border: 1px dashed #AAA;
}
ul li:hover{
    background-color: rgba(140,191,38,0.3);
}

Answer 1

您需要在CSS中完全指定最里面的li：

ul>li>ul>li>ul>li:hover{
    background-color: rgba(140,191,38,0.3);
}

如果您的最内层li存在于整个页面的不同深度，则需要指定一个类。

Answer 2

为您要回复<ul>的{{1}}设置一个班级。请检查此fiddle

Answer 3

<ul>
    <li>
        <ul>
            <li>
                <ul id='hover'>
                    <li></li>
                     <li></li>
                     <li></li>
                </ul>
            </li>
            <li>
                <ul>
                    <li></li>
                    <li></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

ul#hover li:hover{
    background-color: rgba(140,191,38,0.3);
}

嵌套列表悬停行

3 个答案: