溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
jQuery hover事件
hover(over,out)一個模仿懸停事件（鼠標(biāo)移動到一個對象上面及移出這個對象）的方法。這是一個自定義的方法，它為頻繁使用的任務(wù)提供了一種“保持在其中”的狀態(tài)。
當(dāng)鼠標(biāo)移動到一個匹配的元素上面時，會觸發(fā)指定的第一個函數(shù)。當(dāng)鼠標(biāo)移出這個元素時，會觸發(fā)指定的第二個函數(shù)。而且，會伴隨著對鼠標(biāo)是否仍然處在特定元素中的檢測（例如，處在div中的圖像），如果是，則會繼續(xù)保持“懸?！睜顟B(tài)，而不觸發(fā)移出事件（修正了使用mouseout事件的一個常見錯誤）。
參數(shù) :
over (Function) : 鼠標(biāo)移到元素上要觸發(fā)的函數(shù)
out (Function): 鼠標(biāo)移出元素要觸發(fā)的函數(shù)
示例 :
鼠標(biāo)懸停的表格加上特定的類
jQuery 代碼:
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
實例如下：
<html>
<head>
<style>
body{
font-size:12px;
margin:0px;
}
#box{
width:150px;
margin:auto;
}
.menu{
width:150px;
line-height:25px;
background:#fcc;
}
.level1{
border-color:#fba;
border-style:solid;
border-width:0px1px 1px;
}
ul,li {list-style-type:none;margin:0;padding:0;}
.menuli ul{overflow:hidden; display:none;}
.menuli.level1 a{
display: block;
height: 28px;
line-height: 28px;
color:#42556B;
text-decoration:none;
}
.level2{
background-color:white;
}
.level2li a {
display:block;
height: 28px;
line-height: 28px;
color:#888;
background-color:white;
}
.level2li a:hover {
color:#f00;
}
.current{
overflow:hidden;
background-color:#fba;
}
</style>
<title>jquery導(dǎo)航</title>
<scriptsrc="jquery.js"></script>
<script>
function dropMenu(obj){
$(obj).each(function(){ //遍歷當(dāng)前元素下的每個元素
vartheSpan = $(this);
vartheMenu = theSpan.find(".level2"); //查找類名為".level2"的每個元素
vartarHeight = theMenu.height();
theMenu.css({height:0,opacity:0});
theSpan.hover(
function(){
$(this).addClass("current");
theMenu.stop().show().animate({height:tarHeight,opacity:1},500);
},
function(){
$(this).removeClass("current");
theMenu.stop().animate({height:0,opacity:0},500,function(){
$(this).css({display:"none"});
});
}
);
});
}
$(document).ready(function(){
dropMenu(".level1");
});
</script>
</head>
<body>
<divid="box">
<ulclass="menu">
<liclass="level1"><a href="#">主頁</a>
<ulclass="level2">
<li><ahref="#">主頁一</a></li>
<li><ahref="#">主頁二</a></li>
<li><ahref="#">主頁三</a></li>
</ul>
</li>
<liclass="level1"><a href="#">新聞</a>
<ulclass="level2">
<li><ahref="#">新聞一</a></li>
<li><ahref="#">新聞二</a></li>
<li><ahref="#">新聞三</a></li>
</ul>
</li>
<liclass="level1"><a href="#">聯(lián)系方式</a>
<ulclass="level2">
<li><ahref="#">聯(lián)系方式一</a></li>
<li><ahref="#">聯(lián)系方式二</a></li>
<li><ahref="#">聯(lián)系方式三</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
效果圖如下：
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
