脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js实现鼠标移到链接文字弹出一个提示层

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中appendChild追加子节点无效的解决方法

    JS中appendChild追加子节点无效的解决方法

    这篇文章主要给大家介绍了关于JS中appendChild追加子节点无效的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习
    2018-10-10
  • 腾讯的ip接口 方便获取当前用户的ip地理位置

    腾讯的ip接口 方便获取当前用户的ip地理位置

    在论坛中闲逛，无意中发现腾讯的ip接口。还是挺有意思的。大家可以利用下，这个IP接口所查询到的还是比较准确，我发给几个朋友测试了一下都是正确的，毕竟是腾讯的东西。
    2010-11-11
  • 动态加载、移除js/css文件的示例代码

    动态加载、移除js/css文件的示例代码

    本文简单介绍动态加载、移除、替换js/css文件的示例代码，代码简单易懂，非常不错，具有参考借鉴加载，需要的朋友参考下吧
    2018-03-03
  • 微信小程序实现搜索功能并跳转搜索结果页面

    微信小程序实现搜索功能并跳转搜索结果页面

    这篇文章主要为大家详细介绍了微信小程序实现搜索功能并跳转搜索结果页面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-05-05
  • JavaScript运行过程中的“预编译阶段”和“执行阶段”

    JavaScript运行过程中的“预编译阶段”和“执行阶段”

    这篇文章主要介绍了JavaScript运行过程中的“预编译阶段”和“执行阶段”的相关资料,需要的朋友可以参考下
    2015-12-12
  • JS实现上传文件显示进度条

    JS实现上传文件显示进度条

    这篇文章主要为大家详细介绍了JS实现上传文件显示进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • js Proxy的原理详解

    js Proxy的原理详解

    Proxy用于修改某些操作的默认行为，在目标对象前架设一个“拦截”层，外界对该对象的访问都必须先通过这一层拦截，因此提供了一种机制可以对外界的访问进行过滤和改写。本文就讲讲Proxy的使用
    2021-05-05
  • JavaScript中var与let的区别

    JavaScript中var与let的区别

    这篇文章主要介绍了JavaScript中var与let的区别，var是JavaScript刚出现时就存在的变量声明关键字，而let作为ES6才出现的变量声明关键字，无疑两者之间存在着很大的区别，下面来看看两者之间到底存在什么
    2021-12-12
  • 在组件外(.js文件)中使用pinia的解决方法

    在组件外(.js文件)中使用pinia的解决方法

    这篇文章主要给大家介绍了关于在组件外(.js文件)中使用pinia的解决方法, pinia是Vue的最新一代的轻量级状态管理插件,它允许跨组件/页面共享状态,需要的朋友可以参考下
    2024-06-06
  • 详解JavaScript中的强制类型转换

    详解JavaScript中的强制类型转换

    这篇文章主要介绍了JavaScript中的强制类型转换，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04

最新评论