how to change background color of li elements?

Question

I want to change the color of <li> elements on hover. But the problem is that when I hover on (in following example) fig li both the color getting changed on fig it is yellow and on orange parent li . and second when I hover on fig then pear then date and then orange no event gor fired and no color changes.

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

Is this what you wanted:

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

Are you trying to get the first <li> tag to display brown with out the whole <ul> turning brown. If so please try this. End the <li> tag after orange.

<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");
  }
);

jsfiddle sample

Edit:

Your Code:

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

Please try this:

<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

And if you want to keep it uniform use this...

<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");
  }
);

Answer 3

Have you tried using CSS to format it?

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

Answer 4

i have tried with css you can check it out

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>