本文介绍如何使用HTML与JavaScript实现鼠标悬停时显示带有图片和文字的层效果，包括带边框和不带边框两种样式，并展示了如何通过鼠标事件触发这些效果。
（源码实例）通过层DIV实现，当鼠标放在链接上面，显示图片及文字
层的位置是可改变、大小是可改变的、可见是可调的，这个就可以用于实现一些特殊的效果，如隐显、渐显等，
下面是一个鼠标事件的层操作，当鼠标放在上面的时候可以显示定位显示隐藏的层：
<HTML>
<body>
示例展示一：
<a href="www.sina.com" id="i" onmouseover="show(this,'m')" onmouseout="hide('m')">鼠标放在上面显示图片查看有边框的层</a>
<div id="m" style="BORDER-RIGHT:black 1px solid;PADDING-RIGHT:20px;BORDER-TOP:black 1px solid;PADDING-LEFT:20px;Z-INDEX:100;VISIBILITY:hidden;PADDING-BOTTOM:20px;BORDER-LEFT:black 1px solid;WIDTH:80px;PADDING-TOP:20px;BORDER-BOTTOM:black 1px solid;POSITION:absolute" onmouseover="show(i,'m')" onmouseout="hide('m')">
<nobr>注：这个层是加了边框的</nobr><br>
<img src="http://images.163.com/homepage/logo.gif"></img><br>
<a href="http://blog.youkuaiyun.com/fenglibing"><nobr>我的优快云博客</nobr></a><br>
<a href="http://www.163.com">网易</a>
</div>
示例展示二：
<a href="www.sina.com" id="i1" onmouseover="show(this,'m1')" onmouseout="hide('m1')">鼠标放在上面显示图片查看没有边框的层</a>
<div id="m1" style="VISIBILITY:hidden;POSITION:absolute;background-image:url(https://p-blog.youkuaiyun.com/images/p_blog_youkuaiyun.com/xport/155656/o_Java.gif);" onmouseover="show(i1,'m1')" onmouseout="hide('m1')">
注：这个层没有边框但加了背景，写法就简单一点<br>
<img src="http://images.163.com/homepage/logo.gif"></img><br>
<a href="http://blog.youkuaiyun.com/fenglibing"><nobr>我的优快云博客</nobr></a><br>
<a href="http://www.163.com"><nobr>网易</nobr></a>
</div>
<script>
//显示
function show(o,obj){
var m=document.getElementById(obj);
m.style.pixelLeft=getL(o);
m.style.pixelTop=getT(o)+o.offsetHeight;
m.style.visibility='';
}
//隐藏
function hide(obj){
document.getElementById(obj).style.visibility='hidden';
}
//取得左边的位移
function getL(e){
var l=e.offsetLeft;
while(e=e.offsetParent){
l+=e.offsetLeft;
}
return l;
}
//取得顶部的位移
function getT(e){
var t=e.offsetTop;
while(e=e.offsetParent){
t+=e.offsetTop;
}
return t;
}
</script>
</body>
</HTML>
扫一扫
3093
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
![http://images.163.com/homepage/logo.gif"></img><br](http://images.163.com/homepage/logo.gif"></img><br){kind=link}
