js实现鼠标移到链接文字弹出一个提示层的方法
更新时间：2015年05月11日 16:20:07 投稿：shichen2014
这篇文章主要介绍了js实现鼠标移到链接文字弹出一个提示层的方法,涉及javascript鼠标事件与css样式的相关技巧,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
相关文章
本文通过示例代码给大家介绍了js中的闭包，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧2017-10-10
这篇文章主要介绍了小程序自定义modal弹窗封装实现方法，本文通过实例代码相结合的形式给大家介绍的非常详细,需要的朋友可以参考下2018-06-06
大家平时在开发的时候有没被new Date()折磨过，反正我是踩过很多坑，今天小编通过本文给大家详细讲解下new date()方法应用思考，感兴趣的朋友一起看看吧2023-04-04
这篇文章主要介绍了axios POST提交数据的三种请求方式写法示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
这篇文章主要介绍了JS vs TS二分法博弈对比分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2024-01-01
这篇文章主要给大家介绍了关于JS截取数组操作的相关资料,对数组的操作相信大家都不陌生,文中通过代码示例介绍的非常详细,需要的朋友可以参考下2023-08-08
在Javascript中,每个对象都有一个指向另一个对象的链接,这个链接被称为原型链,原型链是Javascript的一种继承机制,它通过链接对象的原型对象来实现属性和方法的继承,本文小编就来和大家一起深度探索JavaScript中的原型链机制2023-09-09
这篇文章主要为大家详细介绍了JS+CSS3实现超炫的散列画廊特效，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-07-07
比较数组中数值的大小是比较常见的操作，本文主要介绍了javascript实现数组最大值和最小值的6种方法，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
这篇文章主要介绍了javascript实现输出指定行数正方形图案的方法,可实现javascript获取用户输入及根据输入参数打印图形的功能,需要的朋友可以参考下2015-08-08
最新评论