如何制作像社交图标效果一样的Squarespace？

Question

我正试图在我的项目中获得像社交图标效果一样的Squarespace。

您可以查看以下示例： http://eringreenawald.com

查找社交图标，当您将鼠标悬停在图标上时，其他图标会变得透明（或灰色或类似的图标）。你们有任何想法如何实现这一目标。

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

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

Answer 1

使用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>

Answer 2

试试这个：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;