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

Answer 2

您是否尝试将第一个<li>标记显示为棕色而整个<div id="tree"> <ul> <li class="no-list-style hover-brown">orange</li> <ul> <li class="hover-yellow">date</li> <li class="hover-yellow">pear</li> <li class="hover-yellow">fig</li> </ul> </ul> </div> $(".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"); } );变为棕色。如果是这样，请试试这个。橙色后结束<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> //Remove and place after the word orange </ul> </div>标记。

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


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

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

jsfiddle sample

修改

您的密码：

<div id="tree"> <ul> <li class="no-list-style"><span class="span-hover">orange</span> <ul> <li ><span class="span-hover-yellow">date</span></li> <li ><span class="span-hover-yellow">pear</span></li> <li ><span class="span-hover-yellow">fig</span></li> </ul> </li> </ul> </div> $(".span-hover").hover( function() { $( this ).not(".span-hover-yellow").css("background","brown"); }, function() { $( this ).not(".span-hover-yellow").css("background","white"); } ); $(".span-hover-yellow").hover( function() { $(".span-hover").not(".span-hover-yellow").css("background","white"); $( this ).css("background","yellow"); }, function() { $( this ).css("background","white"); } );

请尝试：

{{1}}

jsfiddle

如果你想保持统一，请使用这个......

{{1}}

Answer 3

您是否尝试过使用CSS格式化它？

li.hover-brown:hover {color:brown;}
li.hover-brown li:hover {color:yellow;}

Answer 4

我试过用css你可以看看

jsfiddle

#tree ul li.hover-brown:hover{
    background-color: brown;
}
li.hover-brown .hover-yellow:hover{
    background-color: yellow;
}

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

如何改变li元素的背景颜色？

4 个答案: