延迟移出

window.onload = function(){

// var  div1 = document.getElementById('div1');

// var  div2 = document.getElementById('div2');

// var  time;

// div1.onmouseover = function(){//移入

// clearTimeout(time);//清除div2 的定时器

// div2.style.display = 'block';

// }

// div1.onmouseout = function(){//移出

// time = setTimeout(function(){

// div2.style.display = 'none';

// },800)

// }

// div2.onmouseover = function(){//移入

// clearTimeout(time);//清除div2 的定时器

// }

// div2.onmouseout = function(){

// time = setInterval(function(){

// div2.style.display = 'none';

// },800);

// }


//代码优化后

var  div1 = document.getElementById('div1');

var  div2 = document.getElementById('div2');

var  time;

div2.onmouseover = div1.onmouseover = function(){

clearTimeout(time);

div2.style.display = 'block';

}

div2.onmouseout = div1.onmouseout = function(){

time = setTimeout(function(){

div2.style.display = 'none';

},800)

}

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,798评论 0 8
  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 1,899评论 0 1
  • jQuery基础 什么是JQ?一个优秀的JS库,大型开发必备JQ的好处?一简化JS的复杂操作二不再需要关心兼容性三...
    幺七阅读 956评论 0 2
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,842评论 2 17
  • 和萌萌妈妈相聚的一夜半天:昨晚上萌萌妈妈到南宁,约她到中山路吃夜宵,要了一小古海鲜粥,豆浆和油条,边吃边聊,我说我...
    吉祥天女阅读 178评论 1 1