解决方案

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脚本以仅在其悬停时显示。

在悬停CSS上定位多个元素

2 个答案:

解决方案