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

I want to change the color of <li> element on hover. problem is that when I hover on child li elements, the color of parent <li> element also getting change.

我想在悬停时更改

元素的颜色。问题是当我将鼠标悬停在子元素上时,父

元素的颜色也会发生变化。

See following example:

请参阅以下示例:

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/

Any help using css, javascript or jquery appreciated.

使用css,javascript或jquery的任何帮助表示赞赏。

3 个解决方案

#1

Put a SPAN or something else around the text content of the LIs:

在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;
}

#2

If I'm guessing at your question correctly, you need to add a rule for the child ul so its background doesn't inherit its color from its parent li:

如果我正确猜测你的问题,你需要为子ul添加一个规则,这样它的背景就不会从它的父li继承它的颜色:

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

Live Example:

#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>

#3

Try this:

#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>