Wordpress 将鼠标悬停在图像上

Posted 2023-05-08

【中文标题】Wordpress 将鼠标悬停在图像上

【英文标题】：Wordpress hover over image

【发布时间】：2013-10-17 21:19:09

【问题描述】：

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

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

【问题讨论】：

google.com/search?q=css+sprites

【参考方案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;

这意味着图像向上移动，因此顶部图标位于按钮的可见区域上方。

【参考方案2】：

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