感应鼠标滑过图片弹出层显示文字说明

鼠标滑过弹出层，基本上是运用了CSS技术，并加入了少量的JS技巧而完成，主要是onmouseover、onmouseout的一些应用，这也是比较常用的网页技巧了，希望对大家的前端设计有帮助。   

 

<!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=gb2312" />
    <title>感应鼠标滑过图片弹出层显示文字说明丨石家庄感应门|石家庄玻璃隔断</title>
    </head>
    <style>
    dl{width:200px;hegiht:220px;float:left;margin:0 19px;display:inline; position:relative;}/*修改201203-25*/
    dl dt{height:160px;border:1px solid #6e0061;}
    dl dd{line-height:29px;color:#fff}
    .inmovie_box dl dt img{ width:200px; height:160px;}
    .ycc{ width:200px; height:30px; background:#FFF; display:none; z-index:100; position:absolute; left:3px; bottom:0px; line-height:30px; text-align:center; font-size:12px; font-weight:bold;}
    .ycc span{ color:#F00;}
    </style>
    <script>
    //鼠标滑过弹出层
    function ddd(obj, sType) {
    var oDiv = document.getElementById(obj);
    if (sType == 'show') { oDiv.style.display = 'block';}
    if (sType == 'hide') { oDiv.style.display = 'none';}
    }
    </script>
    <body>
    <dl>
    <dt><a href="#" onmouseover="ddd('aa', 'show');" onmouseout="ddd('aa', 'hide');"><img src="/images/m01.jpg" style="width:200px; height: 160px; top:"></a> </dt>
    <div class="ycc" id="aa" onmouseover="ddd('aa', 'show');" onmouseout="ddd('aa', 'hide');"> <span>红叶传情</span></div>
    </dl>
    </body>
    </html>
    <br><br><hr>

 

posted @ 2015-04-22 11:03  滇时尚  阅读(512)  评论(0)  编辑  收藏  举报