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属性添加背景图片。它适用于较旧的浏览器，而且是更好的做法。

Answer 2

在您的CSS中，您有以下内容：

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

其中每一种都有一种共同的风格：transition: 0.5s linear;

尝试删除此样式。我不确定，但它可以解决你的闪烁问题。

希望这有帮助。

如何纠正哈弗css效果颤抖/晃动？

2 个答案: