<!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. solidity事件详解

    很多同学对Solidity 中的Event有疑问,这篇文章就来详细的看看Solidity 中Event到底有什么用? 写在前面 Solidity 是以太坊智能合约编程语言,阅读本文前,你应该对以太坊. ...

  2. 2.安装hdfs yarn

    下载hadoop压缩包设置hadoop环境变量设置hdfs环境变量设置yarn环境变量设置mapreduce环境变量修改hadoop配置设置core-site.xml设置hdfs-site.xml设置 ...

  3. Oil Deposits（DFS连通图）

    Description The GeoSurvComp geologic survey company is responsible for detecting underground oil dep ...

  4. Java学习个人备忘录之关键字static

    被static标记的东西会放在内存中被共享的,对象用到时,就会来取的. class Person { String name; //成员变量,实例变量 static String country = ...

  5. shiro控制登陆成功后跳回之前的页面

    登陆之后跳回之前的页面是在做登陆注册模块时遇到的一个需求,也是很有必要的.若用户直接访问登陆页面,那可以控制它直接到首页,但是要用户没有登陆直接访问自己的购物车等需要经过身份认证的页面,或者因为ses ...

  6. 二叉搜索树(BST)---python实现

    github:代码实现 本文算法均使用python3实现 1. 二叉搜索树定义   二叉搜索树(Binary Search Tree),又名二叉排序树(Binary Sort Tree).   二叉搜 ...

  7. lintcode-6-合并排序数组

    合并排序数组 合并两个排序的整数数组A和B变成一个新的数组. 样例 给出A=[1,2,3,4],B=[2,4,5,6],返回 [1,2,2,3,4,4,5,6] 挑战 你能否优化你的算法,如果其中一个 ...

  8. angular4中使用jquer插件

    有以下办法 1 在html文档头部引入jquery插件依赖,但是文档一旦变动就麻烦了 2 使用指令:http://www.cnblogs.com/liuyt/p/5810100.html 指令是把利器 ...

  9. Qt-excel文件操作方法

    版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:Qt-excel文件操作方法     本文地址:http://techieliang.com/ ...

  10. QObject类 moc处理后代码

    QObject在QT中是所有类的基类,经过MOC处理后代码如下 之所以贴出这段代码,是因为很多流程追踪到最后一些关键性函数都是出自这个类 源码 4.8.6 MOC版本 63 /************ ...