如何讓Squarespace像社交圖標效果一樣？

-3

我想在我的項目上獲得像社交圖標效果一樣的Squarespace。如何讓Squarespace像社交圖標效果一樣？

您可以檢查這些例子如下： http://eringreenawald.com

查找社會圖標，當你將鼠標懸停在圖標其它圖標變得透明（或灰色或類似的東西）。你們有沒有想法如何實現這一點。

普通視圖，而不是在一個特定圖標

懸停光標當鼠標懸停在一個圖標。在這裏，我已經把我的光標在Twitter上的圖標，瞬間所有其他圖標淡出爲顏色較淺

來源

2017-08-17 TheSepProject

你有什麼試過自己？請告訴我們，這可以很簡單，只需純粹的css –

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

來源

2017-08-17 07:37:30 Ehsan

我不認爲他問的是在哪裏獲得圖標，但更多如何使頁面懸停效果 –

@CarstenLøvboAndersenThankyou，我更新了我的文章！ – Ehsan

非常感謝！它的工作:) <3 – TheSepProject

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

來源

2017-08-17 07:38:08

這裏是錯誤，當你懸停在ul（在li s之前）時，所有項目獲得不透明度：0.5。 – Ehsan

@ehsan OP引用的Squarespace圖標具有相同的行爲。 – jfox

如何讓Squarespace像社交圖標效果一樣？

回答

相關問題