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

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 }