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

尝试制作精灵，那里有很多应用程序。谷歌Css精灵生成器。 或试试这个免费的http://csssprites.com。如果你想要任何效果，它只是简单的css或jquery。