How to change the color of li elment on hover in html?

Question

I want to change the color of <li> element on hover. problem is that when I hover on child li elements, the color of parent <li> element also getting change.

See following example:

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

https://jsfiddle.net/1v57nwg8/

Any help using css, javascript or jquery appreciated.

Which ones do you want to change? Which ones do you *not* want to change? — T.J. Crowder, Jul 24 '15 at 07:41
you only want to change the color of inner li? then simple remove css for parent. — Leo the lion, Jul 24 '15 at 07:41
http://stackoverflow.com/questions/14646790/how-to-disable-parent-hover-when-hovering-over-child — 3pic, Jul 24 '15 at 07:46
answered here http://stackoverflow.com/questions/14646790/how-to-disable-parent-hover-when-hovering-over-child — 3pic, Jul 24 '15 at 07:46

score 2 · Answer 1 · answered Jul 24 '15 at 07:42

Put a SPAN or something else around the text content of the LIs:

HTML:

<div id="tree">
    <ul>
        <li><span>apple</span></li>
        <li><span>banana</span></li>
        <li><span>mango</span>
            <ul>
                <li><span>date</span></li>
                <li><span>pear</span></li>
                <li><span>fig</span></li>
            </ul>
        </li>
    </ul>
</div>

CSS:

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

score 0 · Answer 2 · answered Jul 24 '15 at 07:42

0

If I'm guessing at your question correctly, you need to add a rule for the child ul so its background doesn't inherit its color from its parent li:

#tree > ul > li:hover > ul {
   background:white;
}

Live Example:

#tree > ul > li:hover {
   background:brown;
}
#tree > ul > li:hover > ul >li{
   background:white;
}
#tree > ul > li > ul > li:hover {
   background:yellow;
}
/* This is the new rule: */
#tree > ul > li:hover > ul {
   background:white;
}

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

answered Jul 24 '15 at 07:42

T.J. Crowder

1,031,962
187
1,923
1,875

But I want that, when I hover on date, pear or fig it should not show color on mango. – Sunil Madan Jul 24 '15 at 07:58
@SunilMadaan: Unfortunately, that's one of the limitations of CSS: You cannot set the state of an ancestor element based on the state of a descendant element, which is what you would need to do in that case. There's talk of adding a `:has` pseudoclass at some point (jQuery even supports it in its selector engine), but it's not in CSS yet. – T.J. Crowder Jul 24 '15 at 08:04
you can give me the solution using jquery or javascript too. I have no problem – Sunil Madan Jul 24 '15 at 08:07
@SunilMadaan: You can work it out from the jQuery documentation. – T.J. Crowder Jul 24 '15 at 08:07

score 0 · Answer 3 · edited Jul 24 '15 at 07:46

0

Try this:

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

<div id="tree">
<ul>
    <li><div>apple</div></li>
    <li><div>banana</div></li>
    <li><div>mango</div>
        <ul>
            <li>date</li>
            <li>pear</li>
            <li>fig</li>
        </ul>
    </li>
</ul>

edited Jul 24 '15 at 07:46

Hidden Hobbes

13,893
3
38
64

answered Jul 24 '15 at 07:43

Tomasz

106
1
7

All your code should be in a single Stack Snippet for it to work properly and display a live example. I've fixed this for you this time but you may want to remember it for next time. :) – Hidden Hobbes Jul 24 '15 at 07:47

How to change the color of li elment on hover in html?

3 Answers3