嵌套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元素懸停替代背景顏色

回答

相關問題