如何在html中悬停时更改li元素的颜色？

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

在 LI 的文本内容周围放置一个 SPAN 或其他内容：

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>