网上看了几个帖子,自己就写了一个,比较简单的,只有大概功能,详细部分还要根据自己的需求添加和修改。
<!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显示的位置,比较好弄懒得加了。