最近在做一个项目，要在鼠标移到层上后显示出tip提示，网上找了半天，都很麻烦，就自己修改了一个，记录在下面

测试在IE 7、8、9及 chrome 上没问题。

<HTML> <HEAD>
<title>Tooltip</title> <STYLE type="text/css">
body{
font-size:12px;
}
.dek { Z-INDEX: 200; VISIBILITY: hidden; POSITION: absolute ; background:#CCCCCC;}
.bd{
width:100px; 
padding:5px;
}
.top{
height:20px;
width:100px;
background-color:#333333;
color:#FFFFFF;
padding:5px;
}

</STYLE>
</HEAD>
<body>
<DIV class="dek" id="dek"></DIV>

<SCRIPT>

Xoffset=-20;
Yoffset= 20;       
var nav,old,iex=(document.all),yyy=-1000;
if(navigator.appName=="Netscape"){(document.layers)?nav=true:old=true;}

if(!old)
{
var skn=(nav)?document.dek:dek.style;
if(nav)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=get_mouse;
}

function popup(msg)
{
var content="<div class='top'>内容提要</div><div width=100 class='bd'>"+msg+"</div>";
if(old){alert(msg);return;} 
else{yyy=Yoffset;
if(nav){skn.document.write(content);skn.document.close();skn.visibility="visible"}
if(iex){document.all("dek").innerHTML=content;skn.visibility="visible"}
}
}

function get_mouse(e)
{
var x=(nav)?e.pageX:event.x+document.body.scrollLeft;skn.left=x+Xoffset;
var y=(nav)?e.pageY:event.y+document.body.scrollTop;skn.top=y+yyy;
}

function kill()
{
if(!old){yyy=-1000;skn.visibility="hidden";}
}
</SCRIPT>

<span onMouseOver="popup('显示的提示信息,显示的提示信息!!!');" onmouseout="kill();">普通文字上的效果
</span>
<div>
<img src="data:image4.jpg" onMouseOver="popup('显示的提示信息,显示的提示信息!!!');" onmouseout="kill();"/>
<p>
   图片上的效果
</p>
</div>
<div onMouseOver="popup('显示的提示信息,显示的提示信息!!!');" onmouseout="kill();" class="top">
   层上的效果
</div>
</body>
</HTML>

几行简单代码实现DIV层上显示Tooltip效果的更多相关文章

  1. 如何通过Git命令行把代码提交到github上

    1.http://www.cnblogs.com/leesf456/p/5169765.html   参考博客 背景:最近入手了mac,看见mac上的大神都是在用git命令行推代码,我很羡慕有木有,好 ...

  2. jQuery+CSS 简单代码实现遮罩层( 兼容主流浏览器 )

    /* ** jQuery版本:jQuery-1.8.3.min.js ** 浏览器:Chrome( v31.0.1650.63 m ),IE11,Firefox( v32.0.1 ),IETester ...

  3. JQuery Div层滚动条控制（模拟横向滚动条在最顶端显示）

    想让DIV层滚动条显示在顶端,CSS样式没找到相关属性,于是用2个DIV层来模拟做了一个.经测试IE浏览器上显示并不太美观!不知道是否还有更好的办法可以实现这功能呢?   aaaaaaasssssss ...

  4. 输出文章段落首行空格缩进在IE和chrome显示不一致的问题

    一般的编辑文章时,首行都缩进两格,而执行的操作则是一个tab键或者四个空格键,在html代码中体现的往往都是4个 然而我在输出时却发现了同样的html代码,在IE上显示的是缩进了一个字符,在chrom ...

  5. Android中使用Notification在状态栏上显示通知

    场景 状态栏上显示通知效果 注: 博客: https://blog.csdn.net/badao_liumang_qizhi关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 新 ...

  6. 300行ABAP代码实现一个最简单的区块链原型

    不知从什么时候起,区块链在网上一下子就火了. 这里Jerry就不班门弄斧了,网上有太多的区块链介绍文章.我的这篇文章没有任何高大上的术语,就是300行ABAP代码,实现一个最简单的区块链原型. 我个人 ...

  7. 点击文字弹出一个DIV层窗口代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  8. java免费空间！最简单的openshift免费空间上传代码教程！和FTP一样简单!

    史上最简单的openshift免费空间上传代码教程!没有之一! 最近因为想弄一个免费的空间,而且最好是Java的空间,找了一大片,jsp的空间少不说,免费的更是寥寥无几. 找了一大推垃圾空间,终于让我 ...

  9. C# 客服端上传文件与服务器器端接收 （简单代码）

    简单代码: /*服务器端接收写入 可以实现断点续传*/ public string ConnectUpload(string newfilename,string filepath,byte[] fi ...

随机推荐

  1. Kotlin in Action 笔记

    Kotlin 参考 官网 reference kotlin实战 Try Kotlin Kotlin China Github 简介 Kotlin是一门把Java平台作为目标的新的编程语言.它简洁.安全 ...

  2. 线段树-最小逆序数hdu1394

    title: 线段树-最小逆序数 date: 2018-10-12 17:19:16 tags: acm 算法 刷题 categories: ACM-线段树 概述 这是一道简单的线段树的题,,,当然还 ...

  3. ubuntu16.04(64位)建立交叉编译环境，并配置编译内核

    安装步骤 1.准备工具安装目录 将压缩包gcc-linaro-arm-linux-bnueabihf-4.9-2014.07_linux.tar存放在一个目录下,这个目录就是你等会解压缩的目录,以后这 ...

  4. Fiddler手机抓包，相关细节回顾

    目录 0. 准备工作 1. Fiddler配置 2. iPhone配置 3. 抓包示例 上篇Fiddler教程,我们教了大家Fiddler安装配置及如何使用Fiddler进行基本的Http抓包及模拟请 ...

  5. django 启动nginx的时候，报端口被占用的问题

    Nginx [emerg] listen() to 0.0.0.0:80, backlog 511 failed (98: Address already in use) Nginx更新后经常遇到这样 ...

  6. CentOS的利手：“Screen”一个可以在多个进程之间多路复用一个物理终端的窗口管理器

    你是不是经常需要远程登录到Linux服务器?你是不是经常为一些长时间运行的任务头疼?还在用 nohup 吗?那 么来看看 screen 吧,它会给你一个惊喜! 你是不是经常需要 SSH 或者 tele ...

  7. C#高级编程9 第11章 Linq

    Linq 1.Linq概述 列表和实体 准备数据: public class Championship { public int Year { get; set; } public string Fi ...

  8. PHP实现文件下载的核心代码

    PHP实现文件下载的核心代码:

  9. How do I use Tasker to run a sync in FolderSync?

    First of all the full version is required.     The full version works as a Tasker plugin - when you ...

  10. Tasker App Factory

    http://tasker.dinglisch.net/userguide/en/appcreation.html App Creation Introduction Hello World Exam ...