How to activate hover property on an element that is nested within another element?

Question

I want to be able to effect individual list image elements that are nested within a separate div:

<div class="hr-one">
                <hr>
                <div id="wrapper">
                    <ul id="scene">
                        <h3 class="accredited-text">Accredited suppliers and installers of</h3>
                        <li class="layer" data-depth=".1"><img class="revov-logo" src="../AdditionalResources/Images/revov-logo.png"></li>
                        <li class="layer" data-depth=".1"><img class="victron-logo" src="../AdditionalResources/Images/victron-energy-logo.png"></li>
                        <li class="layer" data-depth=".1"><img class="fronius-logo" src="../AdditionalResources/Images/Fonius-Logo_SunrunSolar.png"></li>
                        <li class="layer" data-depth=".1"><img class="byd-logo" src="../AdditionalResources/Images/BuildYourDreams.svg.png"></li>
                        <li class="layer" data-depth=".1"><img class="canadian-logo" src="../AdditionalResources/Images/336-3369122_canadian-solar-canadian-solar-logo-png-clipart.png"></li>
                        <li class="layer" data-depth=".1"><img class="schneider-logo" src="../AdditionalResources/Images/Schneider_Electric-Logo.wine.png"></li>
                        <li class="layer" data-depth=".1"><img class="sunsynk-logo" src="../AdditionalResources/Images/Sunsynk Logo.png"></li>
                        <li class="layer" data-depth=".1"><img class="zbeny-logo" src="../AdditionalResources/Images/logo_beny-d61b60a5043c816521296244ad5dbe8fbf681bfe65b11669c1fb7ea0eb857cc7.png"></li>
                        <li class="layer" data-depth=".1"><img class="eaton-logo" src="../AdditionalResources/Images/eaton-logo-mobile.png"></li>
                    </ul>
                </div>
            </div>

So therefore I want to be able to hover directly on any of the images, namely; 'revov-logo', 'byd-logo', 'eaton-logo' etc, and only have the respective hover effect activated when I have hovered over that specific image specifically.

My CSS:

.eaton-logo {
        width: 17%;
        margin-left: 132%;
        margin-top: 26.5%;
        opacity: 0.4;
        transition: 0.3s;
        filter: grayscale(100%);
    }

    .hr-one:hover .eaton-logo {
        opacity: 1;
        filter: grayscale(0%);
        width: 19%;
    }

The above works, however, when I hover over the entire div, and not the specific image itself (meaning all of the images' hover properties are activated simultaneously.)

score 0 · Answer 1 · answered Feb 25 '21 at 21:25

0

The above works, however, when I hover over the entire div

Yes, because you asked for that.

.hr-one:hover

Use :hover on the individual logo classes.

 .hr-one .eaton-logo:hover

This should work.

answered Feb 25 '21 at 21:25

Dóra Szendrei

118
8

Atomkind · Answer 2 · 2021-02-25T21:49:56.603

Attach the :hoverto the .layer class of your <li>-Elements, followed by img to style the images when .layer is hovered:

.layer:hover img {
    opacity: 1;
    filter: grayscale(0%);
    width: 19%;
}

If you want this individual for every img element, just use the img-classes instead of just img:

.layer:hover .byd-logo {
    opacity: .8;
    filter: grayscale(50%);
}
.layer:hover .eaton-logo {
    opacity: 1;
    filter: grayscale(0%);
    width: 19%;
}

Because if you suggest to add some Text to your images, the image of the hovered <li> would be greyscaled also if you hover the text and not just the image.

And sideways: Write your <h3>-Element before the <ul> and not inside, this is not HTML5-conform ;-)

How to activate hover property on an element that is nested within another element?

2 Answers2