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 onpropertychange输入框 事件获取属性
Mar 26 Javascript
autoIMG 基于jquery的图片自适应插件代码
Mar 12 Javascript
深入理解javascript变量声明
Nov 20 Javascript
JQuery操作textarea,input,select,checkbox方法
Sep 02 Javascript
简单封装js的dom查询实例代码
Jul 08 Javascript
利用jQuery对无序列表排序的简单方法
Oct 16 Javascript
使用JS读取XML文件的方法
Nov 25 Javascript
JS实现百度搜索接口及链接功能实例代码
Feb 02 Javascript
Vue父子组件双向绑定传值的实现方法
Jul 31 Javascript
JS随机密码生成算法
Sep 23 Javascript
ant-design表单处理和常用方法及自定义验证操作
Oct 27 Javascript
JavaScript实现班级抽签小程序
May 19 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的几个常用数字判断函数代码
2012/04/24 PHP
php-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
JQuery 文本框使用小结
2010/05/22 Javascript
C#中TrimStart,TrimEnd,Trim在javascript上的实现
2011/01/17 Javascript
jquery高效反选具体实现
2013/05/05 Javascript
文档对象模型DOM通俗讲解
2013/11/01 Javascript
jquery 实现两Select 标签项互调示例代码
2014/09/25 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
JavaScript编写简单的计算器
2015/11/25 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
解析jQueryEasyUI的使用
2016/11/22 Javascript
react-router JS 控制路由跳转实例
2017/06/15 Javascript
一个基于react的图片裁剪组件示例
2018/04/18 Javascript
element-ui 上传图片后清空图片显示的实例
2018/09/04 Javascript
JavaScript对象原型链原理详解
2020/02/05 Javascript
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
关于python的list相关知识(推荐)
2017/08/30 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
如何利用python制作时间戳转换工具详解
2018/09/12 Python
使用python telnetlib批量备份交换机配置的方法
2019/07/25 Python
浅析Python __name__ 是什么
2020/07/07 Python
运动鞋、足球鞋和慕尼黑球衣:Sport Münzinger
2019/08/26 全球购物
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
String这个类型的class为何定义成final?
2012/11/13 面试题
销售心得体会
2014/01/02 职场文书
上课迟到检讨书100字
2014/01/11 职场文书
清华大学自主招生自荐信
2014/01/29 职场文书
中学教师自我鉴定
2014/02/07 职场文书
设计顾问服务计划书
2014/05/04 职场文书
第一批党的群众路线教育实践活动总结报告
2014/07/03 职场文书
村长反四风问题个人对照检查材料
2014/09/21 职场文书
党员作风建设自查报告
2014/10/23 职场文书
nginx前后端同域名配置的方法实现
2021/03/31 Servers
Nginx四层负载均衡的配置指南
2021/06/11 Servers