如何在嵌套在另一个元素中的元素上激活悬停属性？

如何解决如何在嵌套在另一个元素中的元素上激活悬停属性？

我希望能够影响嵌套在单独 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>

因此，我希望能够直接悬停在任何图像上，即； 'revov-logo'、'byd-logo'、'eaton-logo' 等，并且只有当我专门将鼠标悬停在该特定图像上时才会激活相应的悬停效果。

我的 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%;
    }

但是，当我将鼠标悬停在整个 div 而不是特定图像本身时（这意味着所有图像的悬停属性同时被激活。）

解决方法

但是，当我将鼠标悬停在整个 div 上时，上述方法有效

是的，因为你要求这样做。

.hr-one:hover

在各个徽标类上使用 :hover。

 .hr-one .eaton-logo:hover

这应该有效。

,

将 :hover 附加到 .layer-Elements 的 <li> 类，然后在 img 悬停时添加 .layer 以设置图像样式：>

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

如果您希望每个 img 元素都有这个单独的元素，只需使用 img-classes 而不是 img：

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

因为如果您建议在图像中添加一些文本，则悬停 <li> 的图像也会在您悬停文本而不仅仅是图像时变成灰度图像。

横向：在 <h3> 之前而不是在里面写你的 <ul>-Element，这是 not HTML5-conform ;-)