鼠标移到图片上弹出文字层，覆盖图片

我想要实现一个图片特效，弹当鼠标移到图片上的时候弹出另一个层，把原来的图片覆盖，鼠标离开图片，层消失，还是显示原来的图片，那位知道帮下了，急啊！！！！！！！！！！！

解决方案 »

  1.   

    <div onmoseover=this.innerHTML="提示" onmouseout=this.innerHTML="<img   src=>"><img   src=></div>
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    *{margin:0; padding:0;}
    </style>
    </head>
    <body>
    <img id="img" src="a.jpg" alt="" width="100" height="100" border="1" />
    <div id="div" style="width:100px; height:100px; border:1px solid #000; position:absolute; left:0px; top:0px; z-index:11; background:#fff; display:none;">我是弹出来的层，要盖住下面的图片</div>
    <script type="text/javascript">
    document.getElementById('img').onmouseover = function(){
    document.getElementById('div').style.display = 'block'
    };

    document.getElementById('div').onmouseout = function(){
    this.style.display = 'none'
    };
    </script></body>
    </html>