<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>DIV弹出层</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body style="margin: 50px 0 0 50px">

<div id="title1">
<a>hover</a>
</div>
<div id="hiddenDiv" style="display:none">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default" onclick="button1()">Left</button>
<button type="button" class="btn btn-default" onclick="button2()">Middle</button>
<button type="button" class="btn btn-default" onclick="button3()">Right</button>
</div>
</div>

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script>
var title = document.getElementById('title1');
var hiddenDiv = document.getElementById('hiddenDiv');
var timer = null;
hiddenDiv.onmouseover = title.onmouseover = function(){
if(timer) clearTimeout(timer)
hiddenDiv.style.display = 'block';
}
hiddenDiv.onmouseout = title.onmouseout = function(){
timer = setTimeout(function(){
hiddenDiv.style.display = 'none';
},400);
}
function button1(){
alert(1);
}
function button2(){
alert(2);
}
function button3(){
alert(3);
}
</script>
</body>
</html>

js：鼠标移动到文字显示div，移出文字div显示，鼠标能移进div的更多相关文章

  1. 表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的

    jQuery代码 <input value="请输入用户名" type="text"> <input value="请输入密码&qu ...

  2. CSS+DIV实现文字一行内显示，并且过多的文字以点来代替

    有些时候我们在使用CSS+DIV进行排版实现大量的文字的时候,为了页面的美观,这里需要将文字在div中一行显示,并且将过多的文字进行隐藏,以点号进行代替.当鼠标放上面的时候会以title的形式显示所有 ...

  3. 电力项目七--js控制文字内容过长的显示和文本字数的显示

    当文本框中文字内容过长时,需要调整显示的样式 如上图所示的样式 对应的代码为: <div id="showInfomation" style="visibility ...

  4. JS控制文字只显示两行，超出部分显示省略号

    由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jquery.js+jquery.ellipsi ...

  5. 使用VUE实现在table中文字信息超过5个隐藏，鼠标移到时弹窗显示全部

    使用VUE实现在table中文字信息超过5个隐藏,鼠标移到时弹窗显示全部 <template> <div> <table> <tr v-for="i ...

  6. CSS——div内文字的溢出部分用省略号显示

    使得div内文字的溢出部分用省略号显示,可归纳为两种解决办法,一种方法是用CSS解决,另一种方法是js解决. 一.通过CSS控制显示 div内显示一行,超出部分用省略号显示 div内显示多行,超出部分 ...

  7. 使用html及CSS实现在table中文字信息超过5个隐藏，鼠标移到时弹窗显示全部：

    使用html及CSS实现在table中文字信息超过5个隐藏,鼠标移到时弹窗显示全部: <!DOCTYPE html><html lang="en">< ...

  8. marquee实现文字移动效果;js+div实现文字无缝移动效果

    1.marquee实现文字移动: <marquee width="220px;" scrollamount="5" onmouseover="t ...

  9. div+css文字垂直居中 解决左侧头像右侧姓名，姓名多换行后相对于头像仍居中显示

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

随机推荐

  1. M2功能规格说明书

    1.目的: 这篇随笔是简述我们团队所做的工程所能实现的功能及方便用户的使用. 2.假定和约束: 我们先限定为本地连接数据库进行各种操作的实现.用户电脑中需要有FLASH工具及快播插件.其他只需要了解基 ...

  2. PhotoShop基础工具 -- 移动工具

    还是学点美工的东西吧, 业余爱好   比学编程还难 PS版本 : PhotoShop CS6 1. 移动工具 (1) 工具栏和属性栏 工具栏 和 属性栏 : 左侧的是工具栏, 每选中一个工具, 在菜单 ...

  3. 第二次作业 编程题 PAT 1001A+B Format

    Github的object-oriented仓库:1001.A+BFormat(20) 1.解题的思路过程 在之前学习C语言时曾经碰到过类似的将数字转换成字符输出的情况,这道题目要求输出的数字每三个间 ...

  4. 数据库索引（结合B-树和B+树）

    数据库索引,是数据库管理系统中一个排序的数据结构以协助快速查询.更新数据库表中数据.索引的实现通常使用B树及其变种B+树. 在数据之外,数据库系统还维护着满足特定查找算法的数据结构,这些数据结构以某种 ...

  5. iOS关于setContentOffset的一些细节问题

    在UIScrollView,setContentOffset方法的功能是跳转到你指定内容的坐标, setContentOffset有两种方法:setContentOffset:和setContentO ...

  6. 自定义类属性设置及setter、getter方法的内部实现

    属性是可以说是面向对象语言中封装的一个体现,在自定义类中设置属性就相当于定义了一个私有变量.设置器(setter方法)以及访问器(getter方法),其中无论是变量的定义,方法的声明和实现都是系统自动 ...

  7. lol人物模型提取（九）——终章

      之前顺丰来人拍照取证了一下,又和卖家协商了一下,最后顺风只打算赔偿我23块钱的顺丰邮寄卡,就是当你寄货物的时候可以用这卡来抵邮钱.想想也没多少钱,对方也不同意微信或支付宝转账给我,索性不让顺丰公司 ...

  8. linux shell学习（字符串操作）--01

    http://blog.csdn.net/shuanghujushi/article/details/51298672 在bash shell的使用过程中,经常会遇到一些字符串string的操作,下面 ...

  9. Ubuntu编译内核树

    什么是内核树?刚开始我也没弄明白,通过这几天的学习,有所感悟,就说说我的理解吧!从形式上看,内核树与内核源码的目录结构形式是相同的,都是由各个层次的文件目录结构组成,但是其中的具体内容肯定是不同的.从 ...

  10. 【.Net】Visual Studio的调试技巧

    这是我写的关于VS2010和.Net4发布的博客系列的第26篇. 今天的博文包含了一些有用的能用于VS的调试技巧. 我的朋友Scott Cate(他写了很多很好的关于VS使用技巧和窍门的博客)最近向我 ...