Question

html如何鼠标悬停切换并放大图片？

如题，鼠标悬停，将图片A切换成另一张图片B，并同时放大图片B。求网页代码

Answer 1

<style>
.demo{ width:1000px; height:100px; position:relative;}
.demo div{ position:absolute;}
.demo .imgA{ z-index:11}
.demo .imgB{ z-index:10}
.demo .imgA:hover+.imgB{z-index:12}
.demo .imgB:hover{z-index:12}
.imgB:hover{
-webkit-transition: 0.6s; 
-moz-transition:0.6s; 
-o-transition:0.6s;
-ms-transition:0.6s;
transition:0.6s;
webkit-transform:scale(1.5,1.5);
-moz-transform:scale(1.5,1.5);
-o-transform: scale(1.5,1.5);
-ms-transform:scale(1.5,1.5);
transform:scale(1.5,1.5);}
</style>
<div class="demo">
  <div class="imgA"><img src="A.jpg"/></div>
  <div class="imgB"><img src="B.jpg"/></div>
</div>

追问

大神，我按照你的方法试过了，可以做出来，但效果不是很理想，用CSS有办法优化一下切换时候的效果吗？还有如果用JS的onmouseover和onmouseout怎么做？回答的好，解决了我的问题分就给你了。谢谢大神了！

追答

<script>
function chartA()
{
document.getElementById("myImage").src="b.jpg";
document.getElementById("myImage").style.width="400px";
}/*切换图片加放大*/
function chartB()
{
document.getElementById("myImage").src="a.jpg";
document.getElementById("myImage").style.width="200px";
}/*还原图片*/
</script>
<img id="myImage" onmousemove="chartA(this)" onmouseout="chartB(this)" src="a.jpg" alt="000" >