WordPress的将鼠标悬停在图片

Question

我试图从一个单一的分裂PNG

如何使它所以当图像不上空盘旋，在上面的图像将视图中创建了图像悬停，但是当他们盘旋时，底部会显示。

Answer 1

您要求的技术称为“CSS-Sprites”。这里有一个tutorial

它使用background-position样式。对于元素的默认状态，只需将图像设置为背景。请注意，您需要一个固定的高度（精灵高度的一半）来隐藏图像的第二部分。你还需要一个宽度，因为你的按钮将不包含内容，只是一个背景。对于悬停状态，使用负background-position：

.button-foo{ 
    display: block; 
    height: 29px; 
    width: 110px; 
    background: url("http://i.imgur.com/sJu5vvo.png") no-repeat scroll left top transparent; 
} 

.button-foo:hover{ 
    background-position: 0 -29px; 
} 

这意味着图像被向上移动，以顶图标有你的按钮的可见区域的上方。

Answer 2

试着让精灵在那里有许多应用程序。 Google Css精灵生成器。 或试试这个免费的http://csssprites.com。然后，它只是简单的CSS或jQuery，如果你想要任何效果。