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

Question

参考当前页例如：http://blog.froy.com/bond-street-loft-by-axis-mundi/

悬停在任何Pin它按钮，无论图像或在后的底部，使所述按钮可以“滚动/翻转”，而不是示出的静态Pin它的按钮图像。

我什至不能确定是什么原因......有没有人有这方面的经验？这发生在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; 
} 

该变化是什么导致的影响。