 
<!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>無標(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)離開頭像 
window.a=1; 
}) 
$('ul').delegate('.f','mouseout',function(){// 離開彈層 
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)文章

前端必備插件之純?cè)鶭S的瀑布流插件Macy.js
這篇文章主要介紹了前端必備插件之純?cè)鶭S的瀑布流插件Macy.js，一款非常輕量級(jí)的純?cè)鶭S的瀑布流插件，有興趣的可以了解一下
2017-11-11
JS刷新當(dāng)前頁面的幾種方法總結(jié)
本篇文章主要是對(duì)JS刷新當(dāng)前頁面的幾種方法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2013-12-12
JS實(shí)現(xiàn)的樣式切換功能tableCSS實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的樣式切換功能tableCSS,結(jié)合實(shí)例形式分析了js頁面元素遍歷與樣式動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下
2016-12-12
js實(shí)現(xiàn)視頻鏡面反轉(zhuǎn)的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)視頻鏡面反轉(zhuǎn)的效果,文中的示例代碼簡(jiǎn)潔易懂,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-11-11
Javascript實(shí)現(xiàn)Array和String互轉(zhuǎn)換的方法
這篇文章主要介紹了Javascript實(shí)現(xiàn)Array和String互轉(zhuǎn)換的方法,涉及JavaScript中toString方法與split方法的使用技巧,需要的朋友可以參考下
2015-12-12
淺談下拉菜單中的Option對(duì)象
Option 對(duì)象代表 HTML 表單中下拉列表中的一個(gè)選項(xiàng)。在 HTML 表單中 <option> 標(biāo)簽每出現(xiàn)一次，一個(gè) Option 對(duì)象就會(huì)被創(chuàng)建。您可通過表單的 elements[] 數(shù)組訪問一個(gè) Option 對(duì)象，或者通過使用 document.getElementById()。
2015-05-05
JavaScript中的console.trace()函數(shù)介紹
這篇文章主要介紹了JavaScript中的console.trace()函數(shù)詳細(xì)介紹,console.trace()函數(shù)用來打印函數(shù)調(diào)用的棧信息,需要的朋友可以參考下
2014-12-12
js窗口關(guān)閉提示信息（兼容IE和firefox）
這篇文章主要介紹了當(dāng)關(guān)閉窗口的時(shí)候，顯示窗口提示信息，友好的進(jìn)行提示，防止丟失重要信息，需要的朋友可以參考一下
2015-10-10
深入淺析Extjs中store分組功能的使用方法
這篇文章主要介紹了深入淺析Extjs中store分組功能的使用方法的相關(guān)資料,需要的朋友可以參考下
2016-04-04
基于JavaScript實(shí)現(xiàn)數(shù)值型坐標(biāo)軸刻度計(jì)算算法(echarts的y軸刻度計(jì)算)
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)數(shù)值型坐標(biāo)軸刻度計(jì)算算法(echarts的y軸刻度計(jì)算),文章圍繞主題展開詳細(xì)的內(nèi)容介紹，感興趣的朋友可以參考與一下
2022-06-06