javascript - 如何更改 li 元素的背景颜色？

Question

我想改变 <li> 的颜色悬停的元素。但问题是，当我将鼠标悬停在(在下面的示例中)fig li 上时无花果上的颜色都发生了变化，它是黄色和橙色 parent li .第二，当我将鼠标悬停在无花果上，然后是梨，然后是日期，然后是橙色，没有事件发生，也没有颜色变化。

HTML:

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

JS:

$(".hover-brown").hover(
  function() {
    $( this ).not(".hover-yellow").css("background","brown");
  }, function() {
    $( this ).not(".hover-yellow").css("background","white");
  }
);

$(".hover-yellow").hover(
  function() {
$(".hover-brown").not(".hover-yellow").css("background","white");
    $( this ).css("background","yellow");
  }, function() {
     $( this ).css("background","white");
  }
);

https://jsfiddle.net/4q7uf14h/

Answer 1

这是你想要的吗:

ul>li>ul>li:hover{
    background-color: yellow;

    transition: background-color 1s;
}

.hover-brown:hover{
    background-color: brown;
    transition: background-color 0.4s;
}

Here is the JSFiddle