Guide to altering the color of a list item when hovering in HTML

Question

Guide to altering the color of a list item when hovering in HTML

Is there a way to change the color of the <li> element only when hovering over it, without affecting its parent or child elements?

Here is an 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/

If you have any suggestions using css, javascript, or jquery, they would be greatly appreciated.

javascript jquery html css

Answer 1

Answer №1

Enclose the text content of LIs in a SPAN or equivalent:

Here is an example in 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>

And the corresponding CSS:

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

Answer 2

Enclose the text content of LIs in a SPAN or equivalent:

Here is an example in 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>

And the corresponding CSS:

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

Answer 3

Answer №2

If I understand your question correctly, it seems like you want to apply a specific background rule for the child ul element so that it doesn't inherit the color from its parent li:

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

Check out this Live Example:

#tree > ul > li:hover {
   background:brown;
}
#tree > ul > li:hover > ul >li{
   background:white;
}
#tree > ul > li > ul > li:hover {
   background:yellow;
}
/* The new rule goes here: */
#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>

Answer 4

If I understand your question correctly, it seems like you want to apply a specific background rule for the child ul element so that it doesn't inherit the color from its parent li:

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

Check out this Live Example:

#tree > ul > li:hover {
   background:brown;
}
#tree > ul > li:hover > ul >li{
   background:white;
}
#tree > ul > li > ul > li:hover {
   background:yellow;
}
/* The new rule goes here: */
#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>

Answer 5

Answer №3

Give this a shot:

#forest > ul > li:hover > div {
   background:green;
}
#forest > ul > li > ul > li:hover {
   background:orange;
}

<div id="forest">
<ul>
    <li><div>oak</div></li>
    <li><div>maple</div></li>
    <li><div>pine</div>
        <ul>
            <li>birch</li>
            <li>spruce</li>
            <li>cedar</li>
        </ul>
    </li>
</ul>

Answer 6

Give this a shot:

#forest > ul > li:hover > div {
   background:green;
}
#forest > ul > li > ul > li:hover {
   background:orange;
}

<div id="forest">
<ul>
    <li><div>oak</div></li>
    <li><div>maple</div></li>
    <li><div>pine</div>
        <ul>
            <li>birch</li>
            <li>spruce</li>
            <li>cedar</li>
        </ul>
    </li>
</ul>

Guide to altering the color of a list item when hovering in HTML

Answer №1

Answer №2

Answer №3

Similar questions

Is it possible to close the menu by clicking outside a div or letting it disappear on mouseout after a set period of time?

Tips for inserting a logo in the center of a QR code using Node.js

Multiple File Select Upload Tool

Having trouble identifying the CSS style being applied to a specific element

Identify matching values in objects and dynamically update them with a custom value

Tips for creating a dynamic header background using custom CSS for my website design

Adjust the camera in threejs to be positioned inside a different object

Having issues with Angular Material, specifically with mat-list-item and routerLinkActive not functioning as expected

Uploading a CSV file in JSON format to Amazon S3 with Node.js

How can you add an error notification to a click on a protractor?

Material UI Grid List rows are displaying with an unusually large gap between them, creating a

Ways to prevent image toggling when the mouse moves out of it or when the hover effect stops

Identifying the moment a member receives a role using my Discord bot built with discord.js

Validating HTML Forms Using PHP

Ensure proper tagging by adding a closing tag to the HtmlElement in HtmlUnit

Why isn't changing the property of a Sequelize instance having any effect?

The Mongoose findOneAndUpdate method will only return the newly added document when using the $push

best practices for data flow between components in React using hooks

What is the process of redefining the toString method for a function?

What is the method for embedding HTML content into the header section of tcpdf?