javascript - 当所有元素都悬停时，CSS 在悬停时更改单独的元素

Question

我在 stackoverflow 上寻找解决方案，但没有找到任何东西。 我有一组图标。默认情况下，它们是灰色的，7 个中只有 4 个是可见的。 当我将鼠标悬停在带有图标的 div 上时，我希望 7 个中的 7 个是可见的和灰色的。 在悬停它们时，我希望悬停的每个单独图标都用不同颜色的相同图标进行更改(每个图标都有 2 个不同的 SVG - 灰色和蓝色)

.card-list .social span img {
  height: 13px;
  margin-top: -2px;
}

.card-list .social:hover>.hidden {
  display: inline;
}

.card-list .social:hover>.visible {
  display: none;
}

.card-list .social .hidden span:hover {}

<div class="align-self-center social col-8 col-md-2 px-0">
  <div class="visible mx-0 px-0">
    <span class="visible"><img src="images/email-normal.svg"></span>
    <span class="visible"><img src="images/telegram_normal.svg"></span>
    <span class="visible"><img src="images/twitter_normal.svg"></span>
    <span class="visible"><img src="images/facebook-normal.svg"></span>
  </div>
  <div class="hidden mx-0 px-0">
    <span class=""><img src="images/more_normal.svg"></span>
    <span class=""><img src="images/email-normal.svg"></span>
    <span class=" "><img src="images/telegram_normal.svg"></span>
    <span class=""><img src="images/phone-normal.svg"></span>
    <span class=""><img src="images/twitter_normal.svg"></span>
    <span class=""><img src="images/facebook-normal.svg"></span>
    <span class=""><img src="images/bitcoin_normal.svg"></span>
  </div>
</div>

因此，如果我在最后一个选择器中写了一些东西，它会在悬停时在 html 中搞砸，因为我猜一个悬停覆盖另一个并且它变得疯狂) 很高兴收到任何建议(JS 和 JQuery 也是)，因为我有点困惑)

Answer 1

您不应该为此使用单独的 DIV 元素。相反，您可以简单地使用单个 div 元素并在悬停时显示/隐藏图标。我这里没有你的图片，所以我将使用 Google 的 Material Icons 来给你看一个例子:

.hidden {
  display: none;
}

.icons:hover .hidden{
  display: inline;
}

span:hover {
  color: red;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class='icons'>
  <span><i class="material-icons">accessibility</i></span><br/>
  <span><i class="material-icons">face</i></span><br/>
  <span class='hidden'><i class="material-icons">android</i></span><br/>
  <span class='hidden'><i class="material-icons">autorenew</i></span>
</div>

具有类 hidden 的跨度元素将在 div 悬停时显示。当您将鼠标悬停在图标上时，其颜色将变为红色。同样的想法也适用于您的图像。而不是使用 <img/>元素，使用 <div/>元素并使用 CSS 将图像设置为该 div 的背景。这将允许您使用 CSS 将背景图像设置为悬停时的另一个图像。