js判斷鼠標(biāo)同時(shí)離開(kāi)兩個(gè)div的思路及代碼
更新時(shí)間：2013年05月31日 17:29:43 作者：
js判斷鼠標(biāo)同時(shí)離開(kāi)兩個(gè)div想了好長(zhǎng)時(shí)間終于出爐了，下面與大家分享下具體的實(shí)現(xiàn)代碼，感興趣的朋友可以參考下啊
糾結(jié)了兩天，憋出了個(gè)蛋，歡迎拍磚！?。?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<style type="text/css">
ul{margin:0;padding:0}
li{position:relative;margin:0;padding:0;;}
.grid{background:#ccc;width:100px;height:100px;;}
.f{background:#333;width:200px;height:200px;position:absolute;top:0;left:100px; display:none}
</style>
<script type="text/javascript" src="http://mat1.gtimg.com/www/js/tcomment/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
jQuery(function(){
window.a=0; window.b=1 ; //同為1隱藏彈層
$('ul').delegate('.grid','mouseover',function(){ // 鼠標(biāo)放在頭像上
if($('.f')){
$('ul').append('<div class="f"></div>')
$('.f').css({top:$(this).offset().top})
}
window.a=0;
$('.f').show();
})
$('ul').delegate('.f','mouseover',function(){// 鼠標(biāo)在彈層上
window.b=0;
});
$('ul').delegate('.grid','mouseout',function(){// 鼠標(biāo)離開(kāi)頭像
window.a=1;
})
$('ul').delegate('.f','mouseout',function(){// 離開(kāi)彈層
window.b=1;
});
setInterval(function(){//console.log(window.a +" "+ window.b +" "+ window.c);
if(window.a&&window.b){
$('.f').hide();
}
},100)
})
</script>
</head>
<body>
<ul>
<li><div class="grid"></div></li>
<li><div class="grid"></div></li>
<li><div class="grid"></div></li>
<li><div class="grid"></div></li>
<li><div class="grid"></div></li>
<li><div class="grid"></div></li>
<li><div class="grid"></div></li>
<li><div class="grid"></div></li>
<li><div class="grid"></div></li>
<li><div class="grid"></div></li>
</ul>
</body>
</html>
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<style type="text/css">
ul{margin:0;padding:0}
li{position:relative;margin:0;padding:0;;}
.grid{background:#ccc;width:100px;height:100px;;}
.f{background:#333;width:200px;height:200px;position:absolute;top:0;left:100px; display:none}
</style>
<script type="text/javascript" src="http://mat1.gtimg.com/www/js/tcomment/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
jQuery(function(){
window.a=0; window.b=1 ; //同為1隱藏彈層
$('ul').delegate('.grid','mouseover',function(){ // 鼠標(biāo)放在頭像上
if($('.f')){
$('ul').append('<div class="f"></div>')
$('.f').css({top:$(this).offset().top})
}
window.a=0;
$('.f').show();
})
$('ul').delegate('.f','mouseover',function(){// 鼠標(biāo)在彈層上
window.b=0;
});
$('ul').delegate('.grid','mouseout',function(){// 鼠標(biāo)離開(kāi)頭像
window.a=1;
})
$('ul').delegate('.f','mouseout',function(){// 離開(kāi)彈層
window.b=1;
});
setInterval(function(){//console.log(window.a +" "+ window.b +" "+ window.c);
if(window.a&&window.b){
$('.f').hide();
}
},100)
})
</script>
</head>
<body>
<ul>
<li><div class="grid"></div></li>
<li><div class="grid"></div></li>
<li><div class="grid"></div></li>
<li><div class="grid"></div></li>
<li><div class="grid"></div></li>
<li><div class="grid"></div></li>
<li><div class="grid"></div></li>
<li><div class="grid"></div></li>
<li><div class="grid"></div></li>
<li><div class="grid"></div></li>
</ul>
</body>
</html>
相關(guān)文章
js中textContent、innerText和innerHTML的用法以及區(qū)別
這篇文章主要介紹了JavaScript中textContent、innerText和innerHTML的用法以及區(qū)別,需要的朋友可以參考下2023-05-05
js實(shí)現(xiàn)點(diǎn)擊鏈接后窗口縮小并居中的方法
這篇文章主要介紹了js實(shí)現(xiàn)點(diǎn)擊鏈接后窗口縮小并居中的方法,實(shí)例分析了javascript操作窗口的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
javascript實(shí)現(xiàn)驗(yàn)證IP地址等相關(guān)信息代碼
本文給大家分享的是一組判斷IP地址是否合法，判斷子網(wǎng)掩碼是否合法，驗(yàn)證輸入的網(wǎng)關(guān)地址是否合法的javascript代碼，十分的簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。2015-05-05
本篇文章要是對(duì)JS中的OffsetParent屬性進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所 幫助2014-01-01
這篇文章主要為大家詳細(xì)介紹了Bootstrap表單使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
控制控件只能輸入數(shù)字,含-(負(fù)號(hào)).(小數(shù)點(diǎn))2009-07-07
這篇文章主要介紹了JavaScript AJAX之惰性載入函數(shù),惰性載入表示函數(shù)執(zhí)行的分支僅會(huì)發(fā)生1次,是種JS的優(yōu)化技巧,需要的朋友可以參考下2014-08-08
平時(shí)項(xiàng)目里數(shù)據(jù)可視化展示用的大多是echarts或者h(yuǎn)ighcharts,下面這篇文章主要給大家介紹了關(guān)于Echarts?x軸為time用法的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
在javascript中申明變量使用的關(guān)鍵字都是var，這點(diǎn)與其他的編程語(yǔ)言不盡相同，但是javascript亦含有五種基本的數(shù)據(jù)類型（也可以說(shuō)是簡(jiǎn)單數(shù)據(jù)類型），它們分別是：Undefined，Null，Boolean，Number和String。還含有一種復(fù)雜數(shù)據(jù)類型—Object。這里我們不談復(fù)雜數(shù)據(jù)類型2015-08-08
對(duì)Layer彈窗使用及返回?cái)?shù)據(jù)接收的實(shí)例詳解
今天小編就為大家分享一篇對(duì)Layer彈窗使用及返回?cái)?shù)據(jù)接收的實(shí)例詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09