js:鼠标移动到文字显示div,移出文字div显示,鼠标能移进div
<!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的更多相关文章
- 表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的
jQuery代码 <input value="请输入用户名" type="text"> <input value="请输入密码&qu ...
- CSS+DIV实现文字一行内显示,并且过多的文字以点来代替
有些时候我们在使用CSS+DIV进行排版实现大量的文字的时候,为了页面的美观,这里需要将文字在div中一行显示,并且将过多的文字进行隐藏,以点号进行代替.当鼠标放上面的时候会以title的形式显示所有 ...
- 电力项目七--js控制文字内容过长的显示和文本字数的显示
当文本框中文字内容过长时,需要调整显示的样式 如上图所示的样式 对应的代码为: <div id="showInfomation" style="visibility ...
- JS控制文字只显示两行,超出部分显示省略号
由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jquery.js+jquery.ellipsi ...
- 使用VUE实现在table中文字信息超过5个隐藏,鼠标移到时弹窗显示全部
使用VUE实现在table中文字信息超过5个隐藏,鼠标移到时弹窗显示全部 <template> <div> <table> <tr v-for="i ...
- CSS——div内文字的溢出部分用省略号显示
使得div内文字的溢出部分用省略号显示,可归纳为两种解决办法,一种方法是用CSS解决,另一种方法是js解决. 一.通过CSS控制显示 div内显示一行,超出部分用省略号显示 div内显示多行,超出部分 ...
- 使用html及CSS实现在table中文字信息超过5个隐藏,鼠标移到时弹窗显示全部:
使用html及CSS实现在table中文字信息超过5个隐藏,鼠标移到时弹窗显示全部: <!DOCTYPE html><html lang="en">< ...
- marquee实现文字移动效果;js+div实现文字无缝移动效果
1.marquee实现文字移动: <marquee width="220px;" scrollamount="5" onmouseover="t ...
- div+css文字垂直居中 解决左侧头像右侧姓名,姓名多换行后相对于头像仍居中显示
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
随机推荐
- 微软的XML可视化编辑器:XML Notepad 2007
最近项目需要定义xml协议格式,编写xml文件比较多,之前使用xml spy工具,但是不够轻量级. 微软提供的xml nodepad 2007很实用,希望能给大家提供帮助. 运行后的界面 下载地址:h ...
- Thunder团队第五周 - Scrum会议3
Scrum会议3 小组名称:Thunder 项目名称:i阅app Scrum Master:王航 工作照片: 苗威同学在拍照,所以不在照片内. 参会成员: 王航(Master):http://www. ...
- 第二十次ScrumMeeting会议
第二十次Scrum Meeting 时间:2017/12/10 地点:新主楼1039 人员:蔡帜 王子铭 游心 解小锐 王辰昱 李金奇 杨森 陈鑫 赵晓宇 照片: 目前工作进展 名字 今日 明天的工作 ...
- C# .net 调用QQ邮箱
public static void QQfs() { try { MailMessage mm = new MailMessage(); MailAddress Fromma = new MailA ...
- 【Linux】CentOS安装redis
CENTOS7下安装REDIS 安装完成之后使用:redis-cli命令连接,如图: 提示:/var/run/redis_6379.pid exists, process is already run ...
- solr 学习之数据导入
将数据库中的数据导入到我们的solr索引库中(DataImportHandler) 1.将jdbc的jar包和solr包中的DataImport的jar包拷贝到webapp中solr/WEB-INF/ ...
- 【Maven】Snapshot和Release版本的区别
Snapshot版本代表不稳定.尚处于开发中的版本,快照版本. Release版本则代表稳定的版本,发行版本. 什么时候用Snapshot版本? 依赖库中的jar正处于开发的阶段,会被经常被更新,这种 ...
- dpr dproj 扩展名区别,dprdproj
这段时间用xe6,看了下目录下生成的一些文件,因为隐藏了扩展名,看到两个名字一样的文件,右键属性看了下,同名但扩展名不同,百度了下区别,没有找到答案,问群里的朋友才知道区别,特此记录下来: dpr:D ...
- 浅析Docker容器的应用场景
本文来自网易云社区 作者:娄超 过去几年开源界以openstack为代表的云计算持续火了好久,这两年突然又冒出一个叫Docker的容器技术,其发展之迅猛远超预料.网上介绍Docker容器的文章已经很多 ...
- 分布式消息队列RocketMQ&Kafka -- 消息的“顺序消费”
在说到消息中间件的时候,我们通常都会谈到一个特性:消息的顺序消费问题.这个问题看起来很简单:Producer发送消息1, 2, 3... Consumer按1, 2, 3...顺序消费. 但实际情况却 ...