大佬教程收集整理的这篇文章主要介绍了如何在嵌套在另一个元素中的元素上激活悬停属性？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我希望能够影响嵌套在单独 div 中的单个列表图像元素：@H_450_3@
<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' 等，并且只有当我专门将鼠标悬停在该特定图像上时才会激活相应的悬停效果。@H_450_3@
我的 CSS：@H_450_3@
.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 而不是特定图像本身时（这意味着所有图像的悬停属性同时被激活。）@H_450_3@
但是，当我将鼠标悬停在整个 div 上时，上述方法有效@H_450_3@
是的，因为你要求这样做。@H_450_3@
.hr-one:hover
在各个徽标类上使用 :hover。@H_450_3@
.hr-one .eaton-logo:hover
这应该有效。@H_450_3@ ,
将 :hover 附加到 .layer-Elements 的 <li> 类，然后在 img 悬停时添加 .layer 以设置图像样式：>
@H_450_3@
.layer:hover img {
opacity: 1;
filter: grayscale(0%);
width: 19%;
}
如果您希望每个 img 元素都有这个单独的元素，只需使用 img-classes 而不是 img：@H_450_3@
.layer:hover .byd-logo {
opacity: .8;
filter: grayscale(50%);
}
.layer:hover .eaton-logo {
opacity: 1;
filter: grayscale(0%);
width: 19%;
}
因为如果您建议在图像中添加一些文本，则悬停 <li> 的图像也会在您悬停文本而不仅仅是图像时变成灰度图像。@H_450_3@
横向：在 <h3> 之前而不是在里面写你的 <ul>-Element，这是 not HTML5-conform ;-)@H_450_3@
以上是大佬教程为你收集整理的如何在嵌套在另一个元素中的元素上激活悬停属性？全部内容，希望文章能够帮你解决如何在嵌套在另一个元素中的元素上激活悬停属性？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。