ソーシャルアイコン効果のようなスクエアスペースを作る方法は？

Question

私は私のプロジェクトにソーシャルアイコン効果のような四角形のスペースを取得しようとしています。

あなたは以下のこれらの例確認することがあります。あなたは他のアイコンが透明（または灰色またはそのような何か）を取得アイコンの上にカーソルを置く社会的なアイコンのための http://eringreenawald.com

ルック。皆さんはこれをどのように達成するか考えていますか？特定アイコン

上にカーソルをホバリングしないが

標準表示は、アイコンの上にホバリングします。ここで、私はTwitterのアイコンで私のカーソルを置いてきましたし、すぐに他のすべてのアイコンは、これを試してみて明るい色に

Answer 1

をフェードアウト：あなたのように行うことができますCSSを使用して

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

次の：

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>