巧用title属性做提示功能，兼容的js代码

kos — Wed, 14 Oct 2009 08:34:13 +0000

巧用title属性做提示功能，在此之前一直觉得title属性很好用，但依然存在一些小问题：
　　1、当鼠标指上去到提示有间隔时间；
　　2、在ie6或低版本浏览器中，此提示会被下拉菜单和一些优先级比较高的东西遮挡住；
　　3、默认的没有任何样式修饰，在此基础上加入样式，可以让提示更为醒目。
　　小弟在此做了一些优化！

代码如下：



CODE
<html> <head> <script src="http://www.uideas.cn/download/boxover.js"></script> <title>利用title属性做提示功能</title> <style> <!-- body{ margin:0px; padding:0px;} p{ margin:0px; padding:2px;} .oIframe{ position:absolute; _moz-opacity:0;opacity:0; _filter:Alpha(opacity=0);} .dvHdr{border:1px solid #999999; padding:3px; font-size:12px; color:red; background:#cccccc;} .dvBdy{border:1px solid #999999; border-top:0px; font-size:12px; padding:3px; color:#0f0f0f; background:#FFFFFF;} --> </style> </head>  <body style="font-family:arial;font-size:12px"> <p>这里就是图片的说明</p><p> 这张图片没有写src,所以没法显示！</p>]"></p> <p><input type="text" style="width:200px;" title="header=[这是一个文本框] body=[这只是一个普通的文本框]" value=""></p> <p><select name="select" style="width:200px;" title="header=[这是一个下拉菜单] body=[<p>这个看上去优先级不是很高哦</p><p>提示的内容能浮在这个下拉菜单的上面</p>]"><option>--请选择选项--</option></select> <p><a href="http://www.uideas.cn" title="header=[快点] body=[<p>点了你就知道安逸了</p>]">更多更好的网页效果请点击这里！</a> </body> </html>




[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

　　想起这篇日志实在是惭愧，以前有个不好的习惯就是不怎么鼓劲动脑筋，一遇到问题马上到网上找，再加上基础差，所以懒惰的行为在所难免，就这个js而言，以前有点看得不是很懂，但功能实现了，后来因为事多，就没去想这个问题，呵呵，前几天，一朋友问到我，有些问题想一起研究下，结果看了半天觉得里面乱乱的，后来没招了，第二天下班后，自己再回头来想想以前不明白的地方，然后跟着原创的思路慢慢一步步把问题解决得差不多，当时我就汗了！以后会注意了！这也许是一种习惯吧！
　　现在已将最新版的js上传上去了，里面加了很大部分注释！谢谢你们的关注！

相关下载：
　　js下载：boxover.js

散人笔记 » 提示效果

巧用title属性做提示功能，兼容的js代码