这是我的问题的简要概述。我有一个列表，其初始背景颜色 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)上时，其背景更改为颜色二。然后当子元素 1,2 悬停在上面时，背景颜色更改为颜色 1。当子项 1,2 悬停在上面时，它们会变为 颜色 2，依此类推，因为嵌套会越来越深。这意味着对于不同级别的嵌套，背景颜色随着悬停的深入而在两种颜色之间交替。
知道如何使用 jquery 或 css 或两者来做到这一点吗？
最佳答案
您遇到的问题是当您将鼠标悬停在子项上时会触发多个悬停事件。由于子元素是父元素的一部分，因此从技术上讲，父元素也在悬停。您可以通过将每个元素的文本包装在像 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>
关于jquery - 嵌套的 Li 元素悬停备用背景颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5038198/