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的“材质图标”为您展示示例：

.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>

当div悬停时，将显示类hidden的span元素。悬停图标时，其颜色将更改为红色。同样的想法将适用于您的图像。代替使用<img/>元素，而使用<div/>元素并使用CSS将图像设置为该div的背景。这样一来，您就可以使用CSS将背景图片设置为悬停时的另一张图片。

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

1 个答案: