效果预览:http://js.jirengu.com/dunakamini
思想
- 首先是做出移入小div就显示大div,移出就隐藏
- 之后解决从小的div移动到大div,还保持大div显示
odiv1.onmouseout = function(){
timer = setTimeout(function(){
odiv2.style.display = 'none'
},500)
}
odiv2.onmouseover = function(){
clearTimeout(timer)
}
- 再解决大div移动回小的div时的闪烁的问题
odiv2.onmouseout = function(){
timer = setTimeout(function(){
odiv2.style.display = 'none' //给移出大div时加入一个延时器,然后又要给小div的移入记得清除这一次的延时器,才能保持显示大div
},500)
}
- 再合并相似的代码
odiv2.onmouseover = odiv1.onmouseover = function(){
clearTimeout(timer)
odiv2.style.display='block'
}
odiv2.onmouseout = odiv1.onmouseout = function(){
timer = setTimeout(function(){
odiv2.style.display = 'none'
},500)
}
网友评论