Question

我的网站右侧有3个社交媒体按钮，可以旋转一下。每当有人在他们上面盘旋时，他们会在悬停时使网站的字体看起来几乎是大胆的。它只发生在这些图像和它非常烦人。有没有人猜测为什么会发生这种情况？

下面是每个按钮使用的html / CSS：

<div id="socialicon1"><a href="http://facebook.com/sentinelgaming" target="_blank"><img src="http://files.enjin.com/202624/social%20media/facebook%20square.png" width="50" height="50" alt="facebook button"/></a></div>

#socialicon1  img {
    position: fixed;
    top: 350px;
    right: 13px;
    -webkit-transition: all 0.5s ease-out; 
    -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; 
    }

#socialicon1 img:hover { 
    -webkit-transform: rotate(-9deg); 
    -moz-transform: rotate(-9deg); 
    -o-transform: rotate(-9deg);
}

这是网站本身所以你可以看看它：http://www.sentinelgaming.net

提前感谢一大堆！

Answer 1

这是webkit的一个已知问题：http://css-tricks.com/forums/discussion/18538/transforms-cause-font-smoothing-weirdness-in-webkit/p1

为什么网站字体会在图像悬停时发生变化？

1 个答案: