Javascript 当鼠标悬停时，图像显示在图像上

我需要在将鼠标悬停在当前图像上时显示另一个图像

给你的部门一个id>

比如：

html:

添加样式

<a href="#">
    <div class="one"></div> 
</a>
<a href="#">
    <div class="two"></div>  
 </a>

.一{
宽度：100px；
高度：100px；
/*背景：url（'icn.png'）不重复*/
背景色：#0080FF；
}
.二{
宽度：100px；
高度：100px；
/*背景：url（'icn.png'）不重复*/
背景色：#8000FF；
}
第一：以前{
内容：''；
宽度：100px；
高度：100px；
/*背景：url（'icn.png'）不重复*/
背景色：#008040；
位置：绝对位置；
}
.2:以前{
内容：''；
宽度：100px；
高度：100px；
/*背景：url（'icn.png'）不重复*/
背景色：#FF0080；
位置：绝对位置；
}
.1:悬停：之前.2:悬停：之前{
宽度：0px；
-webkit动画：动画。2s 1线性；
}
@-webkit关键帧动画{
从{宽度：100px}
到{宽度：0px；}
}

如果要使这些按钮成为图像。我建议使用css sprite技术
基本上，您将使用悬停来更改图像本身
这里有一个链接可以更好地理解

再见

---

*如果答案是正确的，请说。

好的，到目前为止您尝试了什么？我们不会为你做所有的工作。谢谢你让我们知道你的需要。你想让我们完成你剩下的代码吗？您尝试了什么？您的HTML中有一个额外的

。

<div id="image1"> <a href="#"> <img src="images/Informasjon_button.png" width="120px" height="120px" /></a><span class="overlay"></span></div>

.image1:hover .overlay {
  position:absolute;
  width: 48px;
  height: 48px;
  z-index: 100;
  background: transparent url('image2.png') no-repeat;
  cursor: pointer;
}

<a href="#">
    <div class="one"></div> 
</a>
<a href="#">
    <div class="two"></div>  
 </a>

<style type="text/css">
    .one{
       width: 100px;
       height: 100px;
       /*background: url('icn.png') no-repeat;*/
       background-color: #0080FF;
    }
    .two{
       width: 100px;
       height: 100px;
       /*background: url('icn.png') no-repeat;*/
       background-color: #8000FF;
    }
    .one:before{
      content: '';
      width: 100px;
      height: 100px; 
      /*background: url('icn.png') no-repeat;*/
      background-color: #008040;
      position: absolute;
    }
    .two:before{
       content: '';
      width: 100px;
      height: 100px; 
      /*background: url('icn.png') no-repeat;*/
      background-color: #FF0080;
      position: absolute;
    }
    .one:hover:before, .two:hover:before{
      width: 0px;
      -webkit-animation: animation .2s 1 linear;
    }
       @-webkit-keyframes animation{
       from{width: 100px}
       to{width: 0px;}
    }

</style>