javascript - 如何使用 javascript 或 jquery 在悬停时更改 <li> 元素的颜色？

Question

我想改变 <li> 的颜色元素悬停。就像下面的示例代码一样，当我将鼠标悬停在苹果或香蕉上时，它会显示棕色到相应的 <li>。元素到整套 <li>元素，当我将鼠标悬停在梨或无花果上时 <li> element 它应该在相应的 <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;
}

JS:

$(document).ready(function () {
$("#tree > ul > li > ul > li").hover(
    function() {
        $("#tree > ul > li").css("background","white");
         $("#tree > ul > li > ul > li").css("background","yellow");
    },
    function() {
        $("#tree > ul > li > ul > li").css("background","white");
    });

$("#tree > ul > li").hover(
    function() {
        $("#tree > ul > li > ul > li").css("background","white");
        $("#tree > ul > li").css("background","brown");

    },
    function() {
         $("#tree > ul > li").css("background","white");
    });

});

https://jsfiddle.net/1v57nwg8/3/

Answer 1

这是非常简化和解耦的:

.hover-brown:hover{
    background-color: brown;
}
.hover-yellow:hover{
    background-color: yellow;
}
.no-list-style{
    list-style: none;
}

<div id="tree">
    <ul>
        <li class="hover-brown">apple</li>
        <li class="hover-brown">banana</li>
        <li class="hover-brown">mango</li>
        <li class="no-list-style">
            <ul>
                <li class="hover-yellow">date</li>
                <li class="hover-yellow">pear</li>
                <li class="hover-yellow">fig</li>
            </ul>
        </li>
    </ul>
</div>