wordpress - Wordpress 将鼠标悬停在图像上

Question

我正在尝试从单个拆分 PNG 创建悬停在图像上

如何启用它，以便当图像未悬停时，将查看顶部图像，但当它们悬停时，将显示底部图像。

Answer 1

您要求的技术称为“CSS-Sprites”。这是一个教程

它使用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。