js模拟title效果,代码实现

	网上看了几个帖子,自己就写了一个,比较简单的,只有大概功能,详细部分还要根据自己的需求添加和修改。
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>模拟title</title>
<style>
	.div1{
		height:100px;
		width:200px;
		background-color: aqua;
	}
	.div2{
		height:100px;
		width:200px;
		background-color: aqua;
	}
	.div2 div{
		display:none;
	}
	.div3{ width:70px;  text-align:center; margin-left:17px; float:left; background-color:#afb7ae; margin-top:17px; font-size:17px; border-radius:3px;}
</style>

<script>
	window.onload = function(){
		var d = document.getElementById("d");
		var t = document.getElementById("t");
		var timer;
		d.onmouseover = function(){
			timer=setTimeout(function(){t.style.display='initial';},800); 
		};
		d.onmouseout = function(){
			clearTimeout(timer);
			t.style.display = "none";
		};
	};
</script>

<body>
   <div class="div1" title="系统title">指向此处显示title1</div>
   --------------
   <div id="d" class="div2">指向此处显示title2
	   <div id="t" class="div3">模拟title</div>
	</div>   
</body>
</html>
	还有个比较重要的效果没带上,就是title显示的位置,比较好弄懒得加了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值