灰度双悬停效果

Question

我正在尝试对我网站的社交媒体产生影响。所有社交图标都在 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>

Answer 1

为什么不删除整个声明？

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

您也可以将其注释掉 /* code to remove here */

Answer 2

您可以像这样从社交悬停 class 中删除过滤器行代码：

.

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

}

Answer 3

你可以这样做：

.social:hover {
  -webkit-transition: all 300ms linear;
}

.social:hover > div {
  opacity: 0.5;
}

.social:hover > div:hover {
  opacity: 1.0;
}

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

Answer 4

是这样的吗？

fiddle

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>

灰度双悬停效果

Grayscale double hover effect

html

css

hover

grayscale