（源码实例）通过层DIV实现，当鼠标放在链接上面，显示图片及文字

最新推荐文章于 2023-06-19 14:12:48 发布

daryl715

最新推荐文章于 2023-06-19 14:12:48 发布

阅读量3.3k

点赞数

分类专栏：经验技巧之JSP 文章标签： div function 网易

本文链接：https://blog.youkuaiyun.com/daryl715/article/details/1894388

版权

经验技巧之JSP 专栏收录该内容

58 篇文章

订阅专栏

本文介绍了一种使用层（DIV）实现鼠标悬停效果的方法，包括显示图片和文字，并可通过调整层的位置、大小和可见性来实现各种视觉效果，如隐显、渐显等。提供了两个具体示例，一个是带有边框的层，另一个是没有边框但有背景的层。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

导读：
　　（源码实例）通过层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>
　　
　　

本文转自
http://blog.youkuaiyun.com/fenglibing/archive/2007/09/21/1794351.aspx