（源码实例）通过层DIV实现，当鼠标放在链接上面，显示图片及文字
分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow
也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！
（源码实例）通过层DIV实现，当鼠标放在链接上面，显示图片及文字
层的位置是可改变、大小是可改变的、可见是可调的，这个就可以用于实现一些特殊的效果，如隐显、渐显等，
下面是一个鼠标事件的层操作，当鼠标放在上面的时候可以显示定位显示隐藏的层：
<HTML>
<body>
示例展示一：
<a href="www.sina.com" id="i" οnmοuseοver="show(this,'m')" οnmοuseοut="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" οnmοuseοver="show(i,'m')" οnmοuseοut="hide('m')">
<nobr>注：这个层是加了边框的</nobr><br>
<img src="http://images.163.com/homepage/logo.gif"></img><br>
<a href="http://blog.csdn.net/fenglibing"><nobr>我的CSDN博客</nobr></a><br>
<a href="http://www.163.com">网易</a>
</div>
示例展示二：
<a href="www.sina.com" id="i1" οnmοuseοver="show(this,'m1')" οnmοuseοut="hide('m1')">鼠标放在上面显示图片查看没有边框的层</a>
<div id="m1" style="VISIBILITY:hidden;POSITION:absolute;background-image:url(https://p-blog.csdn.net/images/p_blog_csdn_net/xport/155656/o_Java.gif);" οnmοuseοver="show(i1,'m1')" οnmοuseοut="hide('m1')">
注：这个层没有边框但加了背景，写法就简单一点<br>
<img src="http://images.163.com/homepage/logo.gif"></img><br>
<a href="http://blog.csdn.net/fenglibing"><nobr>我的CSDN博客</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>
给我老师的人工智能教程打call！http://blog.csdn.net/jiangjunshow
（源码实例）通过层DIV实现，当鼠标放在链接上面，显示图片及文字相关推荐
- DPDK 跟踪库tracepoint源码实例分析
DPDK笔记 DPDK 跟踪库tracepoint源码实例分析 RToax 2021年4月 注意: 跟踪库 基于DPDK 20.05 DPDK跟踪库:trace library 1. trace流程源 ...
- 百度编辑器UEditor源码模式下过滤div/style等html标签
2019独角兽企业重金招聘Python工程师标准>>> UEditor在html代码模式下,当输入带有<div style="">.<ifram ...
- ASP网站整站程序PHP源码-打听网(wordpress打造cms)-wordpress-cms整站打包程序-毕设源码实例
ASP网站整站程序PHP源码-打听网(wordpress打造cms)-wordpress-cms,整站打包程序,毕设源码实例,用wordpress中文做成的源码.全站打包,可以自行修改就行. 使用PH ...
- php病毒源代码,病毒程序源码实例剖析-CIH病毒[2]
病毒程序源码实例剖析-CIH病毒[2] OriginalAppEXE SEGMENT ;PE格式可执行文件文件头 FileHeader: db 04dh, 05ah, 090h, 000h, 003h ...
- java编程手机gps定位_GPS 获取Gps定位信息的Android源码实例，通过这个JAVA 目，你可能学会GPS在 手机 238万源代码下载- www.pudn.com...
文件名称: GPS下载 收藏√ [ 5 4 3 2 1 ] 开发工具: Java 文件大小: 59 KB 上传时间: 2013-04-08 下载次数: 22 详细说明:获取Gps定位信息的A ...
- 二当家的官网微信小程序源码实例解析
版权声明:转载请注明原创地址 https://blog.csdn.net/u013032788/article/details/54376774 二当家的官网微信小程序源码实例解析,微信小程序开发教程 ...
- 一般源码安装添加的GD库 是不支持 jpeg 格式的图片的
一般源码安装添加的GD库 是不支持 jpeg 格式的图片的,只支持如下格式 GD Support enabled GD Version bundled (2.0.34 compatible) GI ...
- Jsoup 解析Html源码实例
最近在做数据挖掘的过程中需要对html的源码进行解析,用到了Jsoup这个解析工具,下面写个基本实例来展现它的用法. 需要用到jar包:jsoup-1.7.2.jar,可以到jsoup的官网下载:ht ...
- Android源码分析 - Framework层的Binder（客户端篇）
开篇 本篇以aosp分支android-11.0.0_r25作为基础解析 我们在之前的文章中,从驱动层面分析了Binder是怎样工作的,但Binder驱动只涉及传输部分,待传输对象是怎么产生的呢,这就 ...
最新文章
- SharePoint 2013 场解决方案包含第三方程序集
- [self Introduce]MY job pic
- Document Builder: Error message No virus scan provider available for scanner group CXP_VSCAN
- java彩票案例_java彩票例子
- 报告一下近期读书情况
- 【蓝桥杯单片机】矩阵键盘和独立键盘新解（更稳定更高复用性）
- SSH整合（1）异常
- aspx 判断字符串是否为decimal_C++编程技巧: 如何判断输入是否为整型
- U8服务器怎么修改会计制度,用友GRP-U8乡镇财政精细化管理新会计制度操作手册..doc...
- 深度装机大师一键重装_deep深度装机大师一键安装Win10 64位旗舰版
- http接口开发请求参数签名实用工具类
- 电脑上最好的5个azw3阅读器
- win10计算机无法复制文件,Windows10系统无法复制文件到u盘的解决方案
- 访问计算机需要用户名密码,访问局域网电脑提示需要用户名和密码该怎么办
- cassandra cql解析
- Log4j2高危漏洞CNVD-2021-95914分析复现修复
- 支持iframe的div分隔线插件
- 计算机毕业设计Java醋坊定制销售平台(源码+系统+mysql数据库+lw文档)
- Linux网络常用命令
- Java中正则表达式 .* 的含义