【问题标题】：Target multiple elements on hover css在悬停css上定位多个元素
【发布时间】：2018-12-30 21:49:39
【问题描述】：

我有多个元素，我已经以悬停类为目标，它可以显示文本和图标，但是，我还需要更改图像的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>

【问题讨论】：

对不起，我不明白。我知道您希望同时显示所有文本、图标和图像，但是您希望将鼠标悬停在什么上以显示这些内容？悬停的元素是什么？
@JackBashford 悬停是的，所以一旦我将鼠标悬停在highly-interactive 上，images 类中的文本、图标和图像就会显示出来。
CSS :hover on other element?的可能重复

标签： javascript jquery html css

【解决方案1】：

解决方案

您可以对父母、孩子和兄弟姐妹

应用悬停效果

.parent .child {}
.child ~ .siblings {}

【讨论】：

可能想要在整个组件周围制作一个包装器，然后使用该包装器将鼠标悬停在其上并将影响应用到它的任何子组件。这通常有效

【解决方案2】：

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

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

首先让这个类在 DOM 加载时隐藏。

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

然后加载mouseover的脚本只在悬停时显示。

【讨论】：