鼠标经过在原图片上在盖一个半透明图片，类似百度电影的效果

http://video.baidu.com/childchannal/movie.html
类似于这样的效果
当鼠标经过电影图片的时候，会在原图片上出现另外一张半透明的图片，但鼠标离开的时候，这张半透明的图片就消失了。
不知道怎么上传图片说明- -！

解决方案 »

  1.   

    原图片上出现另外一张半透明的图片（div），其实是原来页面上就有这个"图片"只是隐藏罢了，当鼠标在上面悬停时，将其显示。只需要吧这“图片”的样式调好看点，再让它显示和隐藏就可以。
      

  2.   

    图片上面放个与图片大小相同，位置一样的般透明层，例如background:rgba(255,255,255,0.5);z-index设置比图片的z-index大点，设置 display是none，然后设置鼠标onmouseover时间让那个半透明div的display显示不就行啦，笨方法啊。
      

  3.   

    这样很难理解 比如说
    <div>   透明图片
      <div>   原图
      </div>
    <div>
    然后透明图片display设置不显示
    但是这样原图也显示了
      

  4.   

    不是，是这样
    <div style="z-index:1">图片</div>
    <div style="position:absolute;z-index:2;display:none">透明层</div>
    这样再调一下位置，就
    第二个在第一个上面，鼠标移过去，第二层显示。移开，第二层再隐藏。
      

  5.   

    <!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>
        <title></title>
    </head>
    <body>
    <div style="width:100px;height:100px; border:1px solid #000; position:relative;" id="div">
    <img src="http://avatar.profile.csdn.net/4/A/C/2_aspwebchh.jpg" />
    <img src="http://avatar.profile.csdn.net/8/7/F/2_yu285509945.jpg" style="position:absolute;left:0; top:0; width:100%; height:100%;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);opacity:0; " id="mask"/>
    </div>
    <script type="text/javascript">
    var div = document.getElementById("div");
    var mask = document.getElementById("mask");
    div.onmouseover = function()
    {
        mask.style.opacity = "0.5";
        mask.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity=50)"
    }
    div.onmouseout = function()
    {
        mask.style.opacity = "0";
        mask.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity=0)"
    }
    </script>
    </body>
    </html>