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 相关文章推荐
js自定义事件代码说明
Jan 31 Javascript
html+css+js实现xp window界面及有关功能
Mar 26 Javascript
JavaScript类属性的访问方式详解
Feb 11 Javascript
JavaScript实现的使用键盘控制人物走动实例
Aug 27 Javascript
Javascript中arguments和arguments.callee的区别浅析
Apr 24 Javascript
JavaScript 深层克隆对象详解及实例
Nov 03 Javascript
读Javascript高性能编程重点笔记
Dec 21 Javascript
javascript按顺序加载运行js方法
Dec 01 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
Apr 23 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
Oct 26 Javascript
BootstrapValidator验证用户名已存在(ajax)
Nov 08 Javascript
JS 创建对象的模式实例小结
Apr 28 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随机显示图片的简单示例
2014/02/15 PHP
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
重新认识php array_merge函数
2014/08/31 PHP
php实现的简单日志写入函数
2015/03/31 PHP
PHP防止刷新重复提交页面的示例代码
2015/11/11 PHP
php实现批量上传数据到数据库(.csv格式)的案例
2017/06/18 PHP
thinkphp3.2框架中where条件查询用法总结
2019/08/13 PHP
jquery多浏览器捕捉回车事件代码
2010/06/22 Javascript
JavaScript异步调用定时方法并停止该方法实现代码
2012/03/16 Javascript
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
简单js代码实现selece二级联动(推荐)
2014/02/18 Javascript
jQuery Easyui实现左右布局
2016/01/26 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
基于express中路由规则及获取请求参数的方法
2018/03/12 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
2018/09/29 Javascript
jquery分页优化操作实例分析
2019/08/23 jQuery
小程序Scroll-view上拉滚动刷新数据
2020/06/21 Javascript
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
让你Python到很爽的加速递归函数的装饰器
2019/05/26 Python
Python 按比例获取样本数据或执行任务的实现代码
2020/12/03 Python
Django中ORM的基本使用教程
2020/12/22 Python
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
html5桌面通知(Web Notifications)实例解析
2014/07/07 HTML / CSS
澳大利亚家庭花园和DIY工具网店:VidaXL
2019/05/03 全球购物
澳大利亚窗帘商店:Curtain Wonderland
2019/12/01 全球购物
西班牙在线药店:DosFarma
2020/03/28 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
租房安全协议书
2014/08/20 职场文书
2014年初中班主任工作总结
2014/11/08 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
青年文明号汇报材料
2014/12/23 职场文书
安全检查汇报材料
2014/12/26 职场文书
法律意见书范本
2015/06/04 职场文书
详解MySQL集群搭建
2021/05/26 MySQL
php实现自动生成验证码的实例讲解
2021/11/17 PHP
Python中的tkinter库简单案例详解
2022/01/22 Python