我知道这是旧的,但你不需要两个图像。使用一张图片查看我的示例。
您可以简单地更改背景图像的位置。
<div class="changeColor"> </div>
JavaScript
var dvChange = document.getElementsByClassName('changeColor');
dvChange[0].onmouseover = function(){
this.style.backgroundPosition = '-400px 0px';
}
dvChange[0].onmouseout = function(){
this.style.backgroundPosition = '0px 0px';
}
CSS
.changeColor{
background-image:url('http://www.upsequence.com/images/multibg.png');
width:400px;
height:400px;
background-position: 0px 0px;
}
.changeColor:hover{
background-image:url('http://www.upsequence.com/images/multibg.png');
width:400px;
height:400px;
background-position: -400px 0px;
}
您还可以尝试更改图像 onmouseover 和 onmouseout 的不透明度。我没有这方面的例子,但它超级容易找到,我相信它已经在某个地方的堆栈交换中得到了回答。
在下面的 JSFiddle 中有 Javascript 和非 Javascript 示例。
http://jsfiddle.net/hallmanbilly/gtf2s8ts/
享受!!