如何在鼠標懸停社交圖標上添加文字

-2

我想知道添加這個代碼以將此文本添加到「youtube社交圖標」上的「Vlog即將推出」。謝謝如何在鼠標懸停社交圖標上添加文字

[social_icons icon="fa-youtube" size="fa-2x" link="https://www.youtube.com/" target="_self" icon_color="#fff" background_color="#1f1f1f"]

來源

2017-03-06 Isabelle Roger

多少研究你做了解析這是你自己的？你曾經嘗試過什麼，但無法獲得你需要的結果？ – GoldBishop

我試圖找到答案，是的。我嘗試了自己的widget（wordpress），但我沒有添加好的結果，我決定尋求幫助。謝謝 –

這很好，但你沒有顯示你可能嘗試過的任何工作。這就是降價的原因。有些人對被認爲是「泄露」的帖子進行了冷落，並沒有真正的嘗試而尋求幫助。 – GoldBishop

我剛放棄了快速的HTML/CSS來給你一個想法如何做到這一點。基本上，你必須用透明度0文本疊加，那麼當你將鼠標懸停在你的社交圖標，更改不透明度爲1

li { 
 
    list-style: none; 
 
} 
 

 
li { 
 
    position: relative; 
 
} 
 

 
.overlay-text { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    
 
    width: 100%; 
 
    height: 100%; 
 
    
 
    opacity: 0; 
 
    background: rgba(255, 255, 255, 0.7); 
 
    
 
    transition: opacity 0.3s; 
 
} 
 

 
li:hover .overlay-text { 
 
    opacity: 1; 
 
} 
 
li i { 
 
    font-size: 3em !important; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> 
 

 
<div class="social-wrapper"> 
 
    <ul> 
 
    <li> 
 
     <i class="fa fa-youtube"></i> 
 
     <div class="overlay-text"> 
 
     <h4>Coming Soon!</h4> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>

來源

2017-03-06 21:46:06 zsawaf

非常感謝你，我會試試。 :) –

@IsabelleRoger如果它爲你工作，你能檢查我的答案嗎？ – zsawaf

謝謝。不工作:( –

如何在鼠標懸停社交圖標上添加文字

回答

相關問題