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.onload=function(){
var myDiv1=getId('div1');
var myDiv2=getId('div2');
var timer=null;
/*
* 第一步实现功能
* myDiv1.onmouseover=function(){
myDiv2.style.display='block';
clearTimeout(timer);
};
myDiv1.onmouseout=function(){
timer=setTimeout(function(){
myDiv2.style.display='none';
},300)
};
myDiv2.onmouseover=function(){
clearTimeout(timer);
myDiv2.style.display='block';
};
myDiv2.onmouseout=function(){
timer=setTimeout(function(){
myDiv2.style.display='none';
},300)
}
*/
/*
* 第二步提取
myDiv1.onmouseover=show;
myDiv1.onmouseout=hide;
myDiv2.onmouseover=show;
myDiv2.onmouseout=hide;
*/
/*
* 最后简化
* */
myDiv1.onmouseover=myDiv2.onmouseover=function (){
myDiv2.style.display='block';
clearTimeout(timer);
};
myDiv1.onmouseout=myDiv2.onmouseout=function (){
timer=setTimeout(function(){
myDiv2.style.display='none';
},300)
};
}
</script>