js关于移入移出延迟提示框效果处理

html部分

<div id="div1">我是导航君</div>
<div id="div2" style="display: none;"><i></i>我是导航君的小妹妹</div>

 

css部分

div{
height:40px;
line-height: 40px;
text-align: center;
}
#div1{
width:600px ;
background: #2378E1;
margin:10px auto;
}
#div2{
width:500px ;
background: #F39800;
position: relative;
margin:0 auto;
}
#div2 i{
display: inline-block;
width: 0;
height: 0;
border-left:10px solid transparent ;
border-right:10px solid transparent ;
border-bottom:10px solid #F39800 ;
position: absolute;
left: 50%;
top:-10px;
margin-left:-20px ;
}

js部分

<script type="text/javascript">
function getId(id){ //id传入的是字符串
return document.getElementById(id);
};
/*
function show(){
myDiv2.style.display='block';
clearTimeout(timer);
};
function hide(){
timer=setTimeout(function(){
myDiv2.style.display='none';
},300)
};

*/


window.οnlοad=function(){
var myDiv1=getId('div1');
var myDiv2=getId('div2');
var timer=null;
/*
* 第一步实现功能
* myDiv1.οnmοuseοver=function(){
myDiv2.style.display='block';
clearTimeout(timer);
};
myDiv1.οnmοuseοut=function(){
timer=setTimeout(function(){
myDiv2.style.display='none';
},300)

};
myDiv2.οnmοuseοver=function(){
clearTimeout(timer);
myDiv2.style.display='block';
};
myDiv2.οnmοuseοut=function(){
timer=setTimeout(function(){
myDiv2.style.display='none';
},300)
}
*/
/*
* 第二步提取
myDiv1.οnmοuseοver=show;
myDiv1.οnmοuseοut=hide;

myDiv2.οnmοuseοver=show;
myDiv2.οnmοuseοut=hide;
*/
/*
* 最后简化
* */
myDiv1.οnmοuseοver=myDiv2.οnmοuseοver=function (){
myDiv2.style.display='block';
clearTimeout(timer);
};
myDiv1.οnmοuseοut=myDiv2.οnmοuseοut=function (){
timer=setTimeout(function(){
myDiv2.style.display='none';
},300)
};
}
</script>

转载于:https://www.cnblogs.com/zhangqian1/p/6908378.html