Question

以下是我的问题的快速概述。我有一个初始背景颜色1 的列表，如下所示：

<ul>
<li>Item 1
    <ul>
    <li>Sub Item 1
        <ul>
            <li> Sub Sub Item 1</li>
            <li>Sub Sub Item 2</li>
        </ul>
    </li>
    <li>Sub Item 2</li>
    </ul>
</li>
<li>Item 2</li>
</ul>

我想要的是，第一级项目（第1项，第2项）在悬停时，其背景更改为 color two 。然后，当子项目1,2悬停时，背景颜色变为颜色1 。当子子项目1,2悬停时，它们会变为 color 2 ，依此类推，因为嵌套更深。这意味着对于其他嵌套级别，背景颜色会在悬停时在两种颜色之间交替变换。

任何想法如何使用jquery或css或两者都这样做？

Answer 1

您遇到的问题是当您将鼠标悬停在子项上时会触发多个悬停事件。由于sub是父元素的一部分，因此父级在技术上也会被徘徊。您可以通过将每个项目的文本包装在内联元素（如span）中来解决此问题。现在每个列表项仅激活一个悬停事件。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.odd {color:red;}
.odd:hover, .odd:active{color:blue;}

.even{color:blue;}
.even:hover, .even:active{color:red;}
</style>
</head>
<ul>
<li><span class="odd">Item 1</span>
    <ul>
    <li><span class="even">Sub Item 1</span>
        <ul>
            <li><span class="odd"> Sub Sub Item 1</span></li>
            <li><span class="odd">Sub Sub Item 2</span></li>
        </ul>
    </li>
    <li><span class="even">Sub Item 2</span></li>
    </ul>
</li>
<li><span class="odd">Item 2</span></li>
</ul>


</html>

Answer 2

您可以使用CSS解决此问题。为主要项目提供main类，子项目为sub类，您可以定义

.main:hover
{
    color: Red;
}

.sub:hover
{
    color: Blue;
}

嵌套的李元素悬停替代背景颜色

2 个答案: