如何糾正懸停css效果顫抖/抖動？

我在我的網站中引用了一個懸停效果，該效果引用了65％不透明度的原始圖像。問題是，這隻發生一次，只有我第一次徘徊時，一切震動/顫抖了一下，但一切都開始工作得很好。也許在我的懸停代碼中缺少一些東西？你能看到有什麼問題嗎？如何糾正懸停css效果顫抖/抖動？

感謝您的幫助:)

我使用的CSS代碼：

#rebface 
{ 

content:url("http://static.tumblr.com/g1c47pc/Td2n783c4/nface.png"); 
position:relative;  
left:8%; 
margin-left:20px; 
    display:block; 
    box-sizing: border-box; 
} 

#rebface:hover { 
content:url("http://static.tumblr.com/g1c47pc/alcn783j0/nface_65.png"); 
transition: 0.5s linear; 
position:relative;  

    display: block; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}

的HTML：

<div style="margin-top:20px; display:flex;">  

     <a target="_blank" href="http://www.facebook.com/sharer.php?u={Permalink}"><div id="rebface"></div></a> 

</div>

你可以在這裏看到：（本網站現在只能在Chrome/Safari瀏覽器）

http://testedesignfranjas.tumblr.com/post/87336302788/blend-food-culture-magazine-concepcao-de

來源

2014-06-24 gn66

我不太肯定我明白了。什麼因素是「搖晃」？ –

我檢查了您的網站上的Facebook圖標，並使用Chrome版本35.0.1916.153米工作正常。嗯，我想你的意思是它需要加載額外的背景圖片很短的時間。我會很快發佈一個答案;） –

如果是懸停的社交圖標移動一下，將該div內的標籤更改爲'display：inline-block;' –

你在CSS內容屬性交換圖像。我很確定這些緩存不是頁面加載的，所以當它們懸停時導致短暫的閃爍。

你可以簡單地避免通過使用opacity代替另一幅圖像。

.facebook 
{ 
    content:url("http://static.tumblr.com/g1c47pc/jhDn7hp40/sitef_1.png"); 
    left:50px; 
    z-index:2; 
    position:absolute; 
    top:110px; 
    left:0px; 
    z-index:50; 
} 

.facebook:hover { 
    opacity: 0.6; 
    -webkit-backface-visibility: hidden; 
}

而作爲一個側面說明 - 使用background而不是通過content屬性添加背景圖片。它適用於舊版瀏覽器，更適合於最佳實踐。

來源

2014-06-24 11:02:26

在你的CSS您具備以下條件：

#rebtweet:hover{ some-styles } 
#rebface:hover{ some-styles } 
#rebtumb:hover{ some-styles } 
#rebgplus:hover{ some-styles }

它們都有一個共同的風格：transition: 0.5s linear;

嘗試刪除這種風格。我不確定，但它可能會解決您的閃爍問題。

希望這會有所幫助。

來源

2014-06-24 11:03:57

如何糾正懸停css效果顫抖/抖動？

回答

相關問題