嵌套的Li元素懸停其他背景顏色

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）懸停在其上時，其背景更改為顏色2 。 然后，當將子項目1,2懸停在上面時，背景顏色更改為顏色1 。 當子子項1,2懸停在子項1,2時，它們會變為顏色2 ，依此類推，隨着嵌套的加深。 這意味着對於交替的嵌套層次，背景顏色會隨着懸停時的深入而在兩種顏色之間交替。

任何想法如何做到這一點使用jQuery或CSS或兩者？

Answer 1

您遇到的問題是，當您將鼠標懸停在子項上時會觸發多個懸停事件。 由於子元素是父元素的一部分，因此從技術上講，父元素也將懸停。 您可以通過將每個項目的文本包裝在諸如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一個sub類別，您可以定義

.main:hover
{
    color: Red;
}

.sub:hover
{
    color: Blue;
}

嵌套的Li元素懸停其他背景顏色

問題描述

2 個解決方案

解決方案1
1 已采納 2011-02-18 06:53:46

解決方案2
0 2011-02-18 06:24:04

嵌套的Li元素懸停其他背景顏色

問題描述

2 個解決方案

解決方案1 1 已采納 2011-02-18 06:53:46

解決方案2 0 2011-02-18 06:24:04

解決方案1
1 已采納 2011-02-18 06:53:46

解決方案2
0 2011-02-18 06:24:04