jquery - 如何在悬停图像上提供自定义过渡效果

Question

我的页面上有一些链接。该链接有背景图片。当有人将鼠标悬停在该图像上时，新图像将必须带有过渡效果。我需要 this transition effect在这个链接中，当您点击下拉菜单时，彩色背景会从从左到右出现。我希望当有人将鼠标悬停在我的图像上时，我的悬停背景图像就会像那样出现。但是，不是像下拉菜单那样从左到右，它应该是从下到上。有什么办法可以通过 CSS3 来实现吗？如果没有，你能帮我提供 jquery 可下载示例吗？如果我必须使用 jQuery 来执行此操作，我希望您能帮助我生成它，因为我不是 jQuery 专家。

我的示例 HTML 代码:

<a href="dataMining.html" class="dMining">Data Mining</a>
<a href="distributedSystems.html" class="dSystem">Distributed Systems</a>

示例 CSS 代码:

.dMining, .dSystem {
   width: 139px;
   height: 70px;
   float: left;
}
.dMining {
   background: url('../images/dataMiningNormal.png');
}
.dMining:hover {
   background: url('../images/dataMiningHover.png');
}
.dSystem {
   background: url('../images/distributedSystemNormal.png');
}
.dSystem:hover {
   background: url('../images/distributedSystemHover.png');
}

示例正常图像:

示例悬停图像:

提前致谢

Answer 1

将图像组合成 css sprite .然后只需为背景位置设置动画。

#my-menu-item { transition: background-position 1s }
#my-menu-item:hover { background-position: 0px -[menuItemHeight]px }