js实现鼠标移到链接文字弹出一个提示层的方法


Posted in Javascript onMay 11, 2015

本文实例讲述了js实现鼠标移到链接文字弹出一个提示层的方法。分享给大家供大家参考。具体分析如下:

这里实现鼠标移动到链接文字上面,弹出一个已定义好的DIV层的效果。在这个层里你可以加入与此链接对应的信息,这样就成了一个信息提示窗,在淘宝、新浪都能看到这种效果,很实用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标移到文字上弹出提示层</title>
<style type="text/css">
<!--
#box{
display:none;
width: 315px;
height: 180px; 
background:#CCC;
border:1px solid #333;
padding:12px;
text-align:center;
}
-->
</style>
<script type="text/javascript" language="javascript" >
<!--
function display(){
document.getElementById("box").style.display="block"; 
}
function disappear(){
document.getElementById("box").style.display="none"; 
}
-->
</script>
</head>
<body>
<a href="#" onmouseover="display()" onmouseout="disappear()">
鼠标放到这儿!
</a>
<div id="box" onmouseover="display()" onmouseout="disappear()">
效果不错吧?这里面你可以设置一张图片,也可以是一段文字,
而且源代码很简单哦!
</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript Select标记中options操作方法集合
Oct 22 Javascript
js 页面传参数时 参数值含特殊字符的问题
Dec 13 Javascript
纯javascript实现自动发送邮件
Oct 21 Javascript
js右下角弹出提示框示例代码
Jan 12 Javascript
jQuery实现打开页面渐现效果示例
Jul 27 Javascript
Angular2 父子组件数据通信实例
Jun 22 Javascript
vuex直接赋值的三种方法总结
Sep 16 Javascript
JavaScript栈和队列相关操作与实现方法详解
Dec 07 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
Sep 17 Javascript
微信小程序实现拍照和相册选取图片
May 09 Javascript
react合成事件与原生事件的相关理解
May 13 Javascript
JavaScript实现简单的音乐播放器
Aug 14 Javascript
js光标定位文本框回车表单提交问题的解决方法
May 11 #Javascript
jQuery子窗体取得父窗体元素的方法
May 11 #Javascript
js控制div弹出层实现方法
May 11 #Javascript
JavaScript实现点击文字切换登录窗口的方法
May 11 #Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 #Javascript
JS选项卡动态替换banner图片路径的方法
May 11 #Javascript
js操作css属性实现div层展开关闭效果的方法
May 11 #Javascript
You might like
PHP如何编写易读的代码
2007/07/10 PHP
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
2010/01/07 Javascript
JavaScript实现斗地主游戏的思路
2016/02/29 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
2016/09/09 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
2016/10/27 Javascript
微信小程序中的onLoad详解及简单实例
2017/04/05 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
Angularjs实现多图片上传预览功能
2018/07/18 Javascript
checkbox在vue中的用法小结
2018/11/13 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
React中使用外部样式的3种方式(小结)
2019/05/28 Javascript
vue axios请求成功却进入catch的原因分析
2020/09/08 Javascript
python分析nignx访问日志脚本分享
2015/02/26 Python
python将ip地址转换成整数的方法
2015/03/17 Python
Python模拟用户登录验证
2017/09/11 Python
Python socket实现简单聊天室
2018/04/01 Python
python搭建服务器实现两个Android客户端间收发消息
2018/04/12 Python
Flask框架学习笔记之路由和反向路由详解【图文与实例】
2019/08/12 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
Python实现壁纸下载与轮换
2020/10/19 Python
css3新单位vw、vh的使用教程
2018/03/23 HTML / CSS
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
大一学生职业生涯规划
2014/03/11 职场文书
学习交流会主持词
2014/04/01 职场文书
贷款委托书范本
2014/04/08 职场文书
安全环保标语
2014/06/09 职场文书
代理人委托书
2014/09/16 职场文书
教师党员个人总结
2015/02/10 职场文书
应聘教师求职信范文
2015/03/20 职场文书
采购内勤岗位职责
2015/04/13 职场文书
2015年干部教育培训工作总结
2015/05/15 职场文书
2015年污水处理厂工作总结
2015/05/26 职场文书
个人的事迹材料怎么写
2019/04/24 职场文书
Python内置包对JSON文件数据进行编码和解码
2022/04/12 Python