如何在html中更改悬停时指示灯的颜色？

Question

我想在悬停时更改<li>元素的颜色。 问题是，当我将鼠标悬停在子li元素上时，父<li>元素的颜色也会改变。

请参见以下示例：

HTML：

<div id="tree">
<ul>
    <li>apple</li>
    <li>banana</li>
    <li>mango
        <ul>
            <li>date</li>
            <li>pear</li>
            <li>fig</li>
        </ul>
    </li>
</ul>

CSS：

#tree > ul > li:hover {
   background:brown;
}
#tree > ul > li:hover > ul >li{
   background:white;
}
#tree > ul > li > ul > li:hover {
   background:yellow;
}

https://jsfiddle.net/1v57nwg8/

感谢使用css，javascript或jquery的任何帮助。

Answer 1

将SPAN或其他内容放在LI的文本内容周围：

HTML：

<div id="tree">
    <ul>
        <li><span>apple</span></li>
        <li><span>banana</span></li>
        <li><span>mango</span>
            <ul>
                <li><span>date</span></li>
                <li><span>pear</span></li>
                <li><span>fig</span></li>
            </ul>
        </li>
    </ul>
</div>

CSS：

#tree > ul > li:hover > span {
   background:brown;
}
#tree > ul > li > ul > li:hover > span {
   background:yellow;
}

Answer 2

如果我正确地猜到了您的问题，则需要为子ul添加一条规则，以便其背景不会从其父li继承其颜色：

#tree > ul > li:hover > ul {
   background:white;
}

现场示例 ：

 #tree > ul > li:hover { background:brown; } #tree > ul > li:hover > ul >li{ background:white; } #tree > ul > li > ul > li:hover { background:yellow; } /* This is the new rule: */ #tree > ul > li:hover > ul { background:white; } 

 <div id="tree"> <ul> <li>apple</li> <li>banana</li> <li>mango <ul> <li>date</li> <li>pear</li> <li>fig</li> </ul> </li> </ul> </div> 

Answer 3

尝试这个：

 #tree > ul > li:hover > div { background:brown; } #tree > ul > li > ul > li:hover { background:yellow; } 

 <div id="tree"> <ul> <li><div>apple</div></li> <li><div>banana</div></li> <li><div>mango</div> <ul> <li>date</li> <li>pear</li> <li>fig</li> </ul> </li> </ul>