在悬停CSS上定位多个元素

Question

我有多个已经定位到悬停类的元素，并且它可以显示文本和图标，但是，我还需要更改图像的opacity ，以便将鼠标悬停在文本上时可以显示。

因此，我需要同时显示所有文字，图标和图像。

我已经尝试过使用CSS，但是如果需要JS或jQuery，则可以找到解决方案。

到目前为止，这是我的代码：

 .features.desktop.highly-interactive.text { position: relative; text-align: left; width: 258 px; } .features.desktop.highly-interactive.text h2 { position: absolute; padding-top: 0; left: 0; } .features.desktop.highly-interactive.hover { padding-top: 30 px; position: absolute; text-align: left; display: block; opacity: 0; } .features.desktop.highly-interactive.hover: hover { opacity: 1; } 

 <section class="container"> <section class="inner_content"> <img src="./images/product-circle.svg" width="667"> <img src="./images/product-features-default.png" alt="PlayOctobo plush" class="main-image"> <a href="https://shop.trycelery.com/page/5bf8be5e33ce8313001185de" target="_blank" class="btn">Pre-Order Now</a> <div class="images"> <img src="./images/HIImage.png" alt="Highly interactive" class="highly-interactive"> </div> <section class="highly-interactive"> <section class="text"> <h2>Highly Interactive</h2> <section class="hover"> <img src="./images/HIIcon.svg" class="icon"> <span>8 separate sensor arrays invisibly integrated into Octobo's arms and body, responsive LED lighting, and the touchscreen itself</span> </section> </section> </section> </section> </section> 

Answer 1

解

您可以对父母 ， 子女和兄弟姐妹应用悬停效果

.parent .child {}
.child〜.siblings {}

Answer 2

您可以使用jquery代码来制作要在悬停时显示的图像类。

$(".highly-interactive").mouseover(function(){
    $(".images").show();
  });

首先，使此类隐藏在DOM负载下。

window.load=function(){
$(".images").show();
}

然后加载mouseover脚本以仅在鼠标悬停时显示。