为什么我的Pin It按钮在悬停时“滚动/翻转”？

Question

请参阅此页面，例如：http://blog.froy.com/bond-street-loft-by-axis-mundi/

将鼠标悬停在任何Pin It按钮上，无论是图像还是帖子底部，都会使按钮“滚动/翻转”而不是显示静态的Pin It按钮图像。

我甚至无法确定原因是什么......有没有人有这方面的经验？这种情况发生在Chrome和Firefox中。网站正在运行Wordpress。

Answer 1

看起来这就是设置按钮的方式。如果您转到this网站，您会看到该按钮的托管位置。你会发现它看起来像三个不同的按钮。这意味着它是一个精灵，并且在鼠标的某些活动中，它显示了图像的不同部分。只是快速浏览一下我发现了这个

media="all"
a, button, input:focus, input[type="button"], input[type="reset"], input[type="submit"], textarea {
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}

你会注意到代码中有过渡，这是影响发生的部分原因。此外，这是仅显示某个图像的代码的一部分，请注意背景位置。

a.PIN_1392869101137_pin_it_button_20 {
background-repeat: none!important;
background-size: 40px 60px!important;
height: 20px!important;
margin: 0!important;
padding: 0!important;
vertical-align: baseline!important;
text-decoration: none!important;
width: 40px!important;
background-position: 0 -20px;
}

现在位于：悬停通知背景位置所在的位置。

a.PIN_1392869101137_pin_it_button_20:hover {
background-position: 0 0px;
}

这种变化是造成这种影响的原因。