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

下面是我的问题的快速概述。我有一个清单，初始背景色这样的：嵌套Li元素悬停替代背景颜色

<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或两者？

来源

2011-02-18 Hirvesh

基本上，我希望孩子的背景颜色始终与悬停时的父背景颜色对比，只使用两种颜色... – Hirvesh 2011-02-18 06:16:26

您所遇到的问题是，当你将鼠标悬停在子项的多个悬停事件被触发。由于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>

来源

2011-02-18 06:53:46 Corey

我明白这一点。但对于深度嵌套的项目，悬停颜色与父项的颜色保持一致。 – Hirvesh 2011-02-18 07:21:13

你可以用CSS解决这个问题。提供的主要项目一类的main和子项类的sub，你可以定义

.main:hover 
{ 
    color: Red; 
} 

.sub:hover 
{ 
    color: Blue; 
}

来源

2011-02-18 06:24:04 Vadim

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

回答

相关问题