jquery - 在鼠标悬停时显示 PNG 的不同部分

Question

我看到一个网站有一个 img 标签，它指的是正常状态下的单个图像。它显示 PNG 的一部分，鼠标悬停时它显示同一 PNG 图像的不同部分。 In the example page如果您将鼠标悬停在解决方案菜单项上，然后将鼠标悬停在任何子项上，它将在其中显示同一图像的不同部分。

我希望在我的 wordpress 站点中添加相同的效果。这是怎么做到的？

Answer 1

CSS Image Sprites

Fiddle Demo

HTML

<div class="div"></div>

CSS

.div {
    display: block;
    width: 100%;
    height: 100px;
    overflow: hidden;
    margin-bottom: 20px;
    background:url("http://www.fortinet.com/sites/all/themes/fortinet/images/solution_icons/enterprise_core.png") no-repeat;
}
.div:hover {
    background-position: 0 -100px;
}