效果预览: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) }
作者:徐金俊
链接:https://www.jianshu.com/p/eeea5b645e6f