html - 如何纠正悬停 css 效果颤抖/晃动？

Question

我在我的网站上制作了一个悬停效果，它引用了一张不透明度为 65% 的原始图片。问题是，这只会发生一次，只有我第一次将它悬停时，一切都会摇晃/颤抖，但随后一切都会开始正常工作。也许我的悬停代码中缺少某些东西？你能看出哪里出了问题吗？

感谢您的帮助:)

我正在使用的 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

Answer 1

您正在交换 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 属性添加背景图像。它适用于较旧的浏览器，更像是一种最佳实践。