灰度双悬停效果

srzsanti

我正在尝试对我网站的社交媒体产生影响。所有社交图标都在 a 内，div 具有悬停效果filter: grayscale(100%)。我想要做的是将过滤器重置为filter: grayscale(0%)我悬停的社交图标（再次为其添加颜色）。我尝试了很多东西，但它似乎是错误或至少对于 webkit。

.social:hover :not(h3) {
  filter: grayscale(100%);
  opacity: 0.8;
  -webkit-transition: all 300ms linear;
}

.social img {
  width: 32px;
  height: 32px;
}

.facebook img:hover {
  filter: grayscale(%);
  opacity: 1;
}

<div class="social">
  <h3>Stay connected!</h3>
  <a target="_blank" class="btn facebook" href="https://www.facebook.com/LaDulceriaCuracao/"><img src="../Media/SocialMedia/facebook.gif"></a>
  <a target="_blank" class="instagram" href="https://www.instagram.com/dulceriacuracao/"><img src="../Media/SocialMedia/instagram.gif" /></a>
  <a target="_blank" class="twitter" href="https://twitter.com/La_Dulceria1"><img src="../Media/SocialMedia/twitter.gif" /></a>
</div>

仓促集合

像这样的东西？

小提琴

https://jsfiddle.net/Hastig/omdq64n5/

body {
  width: 100%;
  margin: 0;
}
.container {
  display: flex;
  justify-content: center;
  width: 100%;
  font-size: 100px;
}
.item {
  display: flex;
  justify-content: center; 
  flex: 1;
}
i {
  display: flex;
  justify-content: center;
  color: red;
}
.container:hover i {
  filter: grayscale(100%);
}
.item:hover i {
  filter: grayscale(0%);
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
  <div class="item"><i class="fa fa-picture-o"></i></div>
  <div class="item"><i class="fa fa-picture-o"></i></div>
  <div class="item"><i class="fa fa-picture-o"></i></div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。