利用javaScript实现鼠标在文字上悬浮时弹出悬浮层

时间：2022-05-16 02:26:42

在人人,CSDN等一些网站，当鼠标在某个东西上悬浮时，会弹出一个悬浮层，鼠标移开悬浮层消失。比如说CSDN的通知(应该是进入写新文章的页面后页面上方的那个铃铛),具体是什么实现的呢？上代码：

<!doctype html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>TEST</title>

</head>

<style type="text/css">

    body{

        position: relative;

    }

	#inform{

          position: absolute;

		  top: 20px;

		  width: 350px;

		  max-height: 250px;           /* 设置最大高度，当高度达到此值时出现滚动条 */

		  z-index: 10;

		  background-color: #E0E5E5;

		  overflow: auto;              /* 自动添加滚动条 */

		  box-shadow:0px 0px 10px #000;   /* 外阴影 */

		  display: none;   /* 默认隐藏 */

	}

	#informTable{

		table-layout:fixed;         /* 用于实现表格td自动换行的部分代码*/

		width: 325px;

	}

	#informTable tr td{

		width: 325px;

		height:30px;

		font-size: 16px;

		font-family: Georgia;

		color: #555555;

		word-wrap:break-word;   /*自动换行*/

		padding: 0 0 0 0;

	}

	#informTable tr td:hover{

		background-color: #D9D9D9;

	}

	#inform hr{

		border:1;

		width: 325px;

		margin-bottom: 0px;

	}

</style>

<script type="text/javascript">

      //显示悬浮层

      function showInform(){

      	document.getElementById("inform").style.display='block';

         // document.getElementById("inform").css("display","block");

      }

      //隐藏悬浮层

      function hiddenInform(event){

      	 var informDiv = document.getElementById('inform');

      	 var x=event.clientX;

         var y=event.clientY;

      	 var divx1 = informDiv.offsetLeft;

         var divy1 = informDiv.offsetTop;

         var divx2 = informDiv.offsetLeft + informDiv.offsetWidth;

         var divy2 = informDiv.offsetTop + informDiv.offsetHeight;

         if( x < divx1 || x > divx2 || y < divy1 || y > divy2){

              document.getElementById('inform').style.display='none';

         }  

      }

</script>

<body>

    <a id="btn" onMouseOver="javascript:showInform();"  onMouseOut="hiddenInform()">

    	警告消息

    </a>

	<div id="inform"  onMouseOver="javascript:showInform();"  onMouseOut="hiddenInform(event)">

           <table id="informTable">

           	  <tr>

           	  	<td>

           	  		 编号5005车辆发车间隔异常

           	  		<hr/>

           	  	</td>

           	  </tr>

           	  <tr>

           	  	<td>

           	  		 编号5005车辆发车间隔异常

           	  		<hr/>

           	  	</td>

           	  </tr>

           	  <tr>

           	  	<td>

           	  		 编号5005车辆发车间隔异常

           	  		<hr/>

           	  	</td>

           	  </tr>

           	  <tr>

           	  	<td>

           	  		 编号5005车辆发车间隔异常

           	  		<hr/>

           	  	</td>

           	  </tr>

           	  <tr>

           	  	<td>

           	  		 编号5005车辆发车间隔异常

           	  		<hr/>

           	  	</td>

           	  </tr>

              <tr>

           	  	<td>

           	  		 编号5005车辆发车间隔异常

           	  		<hr/>

           	  	</td>

           	  </tr>

           	  <tr>

           	  	<td>

           	  		 编号5005车辆发车间隔异常

           	  		<hr/>

           	  	</td>

           	  </tr>

           	  <tr>

           	  	<td>

           	  		 编号5005车辆发车间隔异常

           	  		<hr/>

           	  	</td>

           	  </tr>

           </table>

	</div>

</body>

</html>

效果图如下：

利用javaScript实现鼠标在文字上悬浮时弹出悬浮层

版权声明：本文为博主原创文章，未经博主允许不得转载。

利用javaScript实现鼠标在文字上悬浮时弹出悬浮层的更多相关文章

  1. xtraTabbedMdiManager的标题上右鍵弹出关闭窗体菜单

    实现一个增值功能, 在xtraTabbedMdiManager组件TabPage标题上右鍵弹出关闭当前窗体的菜单. C# Code: private void xtraTabbedMdiManager ...

  2. Jquery hover鼠标经过时弹出div动态提示语

    一.效果图 二.需求描述 1.鼠标经过table每一行时,弹出div动态提示语: 2.div弹出层的位置随鼠标位置的变化而变化: 3.鼠标离开table或获取的动态提示语为空时,div弹出层消失. 下 ...

  3. h5 安卓&sol;IOS长按图片、文字禁止选中或弹出系统菜单 的解决方法

    最近在做IM的语音功能,发现当长按录音的时候手机会弹出来系统菜单, IOS下bug形式:1)长按的标签设置为css background的形式:不会弹出菜单: 2)但是当设置为img时,系统默认识别为 ...

  4. Java实现文件上传-按钮弹出上传页面

    转自: https://blessht.iteye.com/blog/1405057 最近自己在做一个小系统玩的时候涉及到了文件的上传,于是在网上找到Java上传文件的方案,最后确定使用common- ...

  5. input内文字点击消失 弹出层，可以写表单

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  6. IE中使用ajaxSubmit上传文件弹出下载提示框

    使用jQuery的ajaxSubmit 上传文件时,在IE中会弹出下载提示框: 解决方法:让action返回String类型,而不是ActionView,

  7. 【Javascript Demo】遮罩层和百度地图弹出层简单实现

    其实想做的就是显示百度地图的弹出层,现在已经简单实现了.示例和代码如下,点击按钮可以看到效果: 1.示例:   2.代码: <!DOCTYPE html PUBLIC "-//W3C/ ...

  8. ios兼容 input输入时弹出键盘框 页面整体上移键盘框消失后在ios上页面不能回弹的问题

    前端h5混合开发手机端ios  当有input输入时,手机下方弹出键盘使页面上移,当输入完成,键盘消失后页面显示回到原位,但实际不能点击(可点击上方区域,有反应),也就是说实际是没有回弹. 解决办法: ...

  9. edusoho上传视频弹出abort之解决方案

    错误描述:edusoho上传如avi.mp4等容量大的图片(如100m以上或500m等)弹出abort提示框 原因:是因为web服务器apache默认上传文件有限制导致的 解决办法如下: (1)首先修 ...

随机推荐

  1. ToDoList：一款非常优秀的任务管理软件 —— 工具类

    ToDoList是一款非常优秀的任务管理软件,用户可以方便地组织和安排计划.这是一个开源的项目,很多细节都考虑到了,推荐大家使用~ ToDoList 帮你把要做的事情列出来,一项一项,类似思维导图. ...

  2. 控制台console输出信息原理理解

    Eclipse控制台输出信息的控制 标签: Eclipse控制台输出信息 2015-01-02 14:11 22454人阅读 评论(1) 收藏 举报  分类: Some Tips(15)  版权声明: ...

  3. ping网络故障

    网络的应用已渐渐深入我们的工作和生活,它带给了我们各方面的便利.因此,这种种的便利致使很多人对网络产生依赖性.那么,当电脑不能上网时,我们如何才能准确地判断电脑问题出在哪里?又如何能快捷地解决这故障? ...

  4. 多线程学习之五超时模式Timer

    timed[超时模式]案例:一个线程提供下载数据,另一个线程执行下载,如果有5秒钟以上,提供下载的线程没有提供数据,下载线程因超时异常,停止下载线程运行. 超时异常类 /** * */ package ...

  5. 优秀个人免费私有云OwnCloud 8&period;0终于发布 - 亮眼新功能初探简介

    OwnCloud是一个基于Linux的私有云开源项目,用户可以免费使用它来搭建自己的私有云来进行文件和多媒体等的分享. 本人有幸在大概一年多前因为项目需要而接触和使用到OwnCloud,但不幸的是当时 ...

  6. js设置按钮不可用

    <input type="button" value="确定" id="stamp" onclick="stampBill( ...

  7. Flex学习笔记-使用MXML和一个AS事件监听器监听事件

    <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...

  8. 《JavaScript 高级程序设计》第一章：简介

    JavaScript 历史 JavaScript的诞生的主要是当时的 netspace 公司谋求为自己的浏览器 Navigator 添加一种脚本语言,以便在本地客户端进行一些行为操作,而这一功能的需求 ...

  9. IDEA导入项目jar包红线&comma; cannot resolve symbol xxxx问题

    简单来说遇到的这种情况2种方式解决了, 不知道还有没有其他原因的. 1.reimport包 2.清缓存重启 针对1方法: a.确实不缺包: 可以先注释掉pom文件中的jar包, 此时idea会提示im ...

  10. MFC&plus;WinPcap编写一个嗅探器之四（获取模块）

    这一节主要介绍如何获取设备列表,比较简单 获取设备列表主要是在CAdpDlg中完成,也就是对应之前创建的选择适配器模块,如图: 当打开选择适配器对话框后,在列表视图控件中显示当前主机所有适配器及适配器 ...

相关文章