如何制作类似社交图标效果的 Squarespace？

Question

我正在尝试在我的项目中获得类似 Squarespace 的社交图标效果。

寻找社交图标，当您将鼠标悬停在某个图标上时，其他图标会变得透明（或灰色或类似颜色）。你们知道如何实现这一目标吗？

普通视图，而不是将光标悬停在特定图标上

将鼠标悬停在图标上时。在这里，我将光标放在 Twitter 图标上，所有其他图标立即淡出为较浅的颜色

Answer 1

试试这个：

$(document).ready(function(){
    $("a").hover(function(){
        $('a').css('opacity',0.5);
        $(this).css('opacity',1);
    },function(){
        $('a').css('opacity',1);
    })
})

a {
    color: #000;
    margin-right:5px;
    transition: all 300ms;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>    
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>

Answer 2

使用CSS你可以进行如下操作：

ul:hover li {
  opacity: 0.5;
}

ul:hover li:hover {
  opacity: 1;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

如何制作类似社交图标效果的 Squarespace？

How to make a Squarespace like social icon effect?

html

javascript

css

jquery

squarespace