如何改變顏色 <li> 懸停元素使用javascript或jquery？

Question

我想在懸停時更改<li>元素的顏色。 像中，當我在蘋果或香蕉它shold懸停以下示例代碼示出了顏色棕色到相應的<li>元素一整套<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;
}

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> 

Answer 2

好吧，如果您將刪除自己的jquery代碼，它將因CSS而發揮作用。

但是，如果您仍然想通過jQuery使用，

使用$（this）如下所示：-

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

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

演示：

http://jsfiddle.net/Rj9bR/41/

Answer 3

我不確定您想要實現什么，但是我認為您不需要JS。

看一下演示： https : //jsfiddle.net/mattydsw/1v57nwg8/4/

下面的CSS：

#tree > ul > li:hover span {
   background:brown;
}
#tree > ul > li > ul > li:hover {
   background:yellow;
}

我還在html標記中添加了span元素。

Answer 4

我不得不編輯您的HTML ， CSS以及jQuery

• 添加了一個額外的li並為其指定了list-style: none; background-color: #fff; list-style: none; background-color: #fff;
• 將jQuery中的選擇器修改this

this將選擇當前懸停的元素，而不是全部選擇

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

 #tree > ul > li:hover { background:brown; } #tree > ul > li:hover > ul >li{ background:white; } #tree > ul > li > ul > li:hover { background:yellow; } #tree>ul>li:last-child { list-style: none; background-color: #fff; } #tree > ul > li > ul { background-color: white; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="tree"> <ul> <li>apple</li> <li>banana</li> <li>mango</li> <li> <ul> <li>date</li> <li>pear</li> <li>fig</li> </ul> </li> </ul> </div>