在鼠标悬停的另一个图像上显示图像

Question

如果我将鼠标悬停在图像上，则在同一图像上显示另一张图像。

平面的上方图像是原始图像，交换的文本是交叉透明图像。

如果我将鼠标悬停在飞机图像上，那么我想显示另一张交换的图像

Answer 1

实现您要做的事情的最佳方法是使用jQuery。请参阅以下内容：

$("#ImageID").mouseover(function(){
    $("#ImageID").attr("src","new/url/goes/here.jpg");
});
$("#ImageID").mouseout(function(){
    $("#ImageID").attr("src","old/url/goes/here.jpg");
});

我希望这有帮助！

Answer 2

试试这段代码：

<style type="text/css"> 
.izo { 
background: url(http://img1.jpg) no-repeat 50% 50%;  
display: block;
width: 400px; 
height: 400px; 
}

.izo:hover { 
background: url(http://img2.jpg) no-repeat 50% 50%; 
} </style> 

<a href="#" class="izo"></a>

Answer 3

尝试使用此功能，您可以显示叠加图像而不更改原始图像

<div class="pic-container">
    <div class="pic-box"><img src="img_original.jpg"></div>
    <div class="pic-box pic-hover"><img src="img_original.jpg"></div>
</div>

＆安培;式

<style>
.pic-container{display:block; width:200px; height:200px; position:relative;}
.pic-container .pic-box{display:block; width:200px; height:200px;}
.pic-container .pic-box img{display:block; width:200px; height:200px;}
.pic-container .pic-hover{position:absolute; top:0; left:0; display:none;}
.pic-container:hover .pic-hover{display:block;}
</style>