Wie man einen Squarespace wie einen sozialen Icon-Effekt macht?

Question

Ich versuche ein Squarespace wie soziale Icon-Effekte auf meinem Projekt zu bekommen.

Sie können diese Beispiele unten überprüfen: http://eringreenawald.com

Blick für die sozialen Symbole, wenn Sie ein Symbol schweben über andere Symbole transparent (oder grau oder so ähnlich) bekommt. Weißt du, wie man das erreicht?

Normalansicht, die zwar nicht den Cursor über ein bestimmtes Symbol schweben

Wenn über ein Symbol schwebt. Hier habe ich meinen Cursor auf Twitter Symbol platziert und sofort alle anderen Symbole ausgeblendet zu einer helleren Farbe

Answer 1

Dieses Versuchen:

$(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 verwenden Sie tun können, als folgt:

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>