我的页面上有一些链接。该链接有背景图片。当有人将鼠标悬停在该图像上时,新图像将必须带有过渡效果。我需要 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');
}
示例正常图像:
示例悬停图像:
提前致谢
最佳答案
将图像组合成 css sprite .然后只需为背景位置设置动画。
#my-menu-item { transition: background-position 1s }
#my-menu-item:hover { background-position: 0px -[menuItemHeight]px }
关于jquery - 如何在悬停图像上提供自定义过渡效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22489453/