溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
jQuery hover事件
hover(over,out)一個模仿懸停事件（鼠標移動到一個對象上面及移出這個對象）的方法。這是一個自定義的方法，它為頻繁使用的任務提供了一種“保持在其中”的狀態。
當鼠標移動到一個匹配的元素上面時，會觸發指定的第一個函數。當鼠標移出這個元素時，會觸發指定的第二個函數。而且，會伴隨著對鼠標是否仍然處在特定元素中的檢測（例如，處在div中的圖像），如果是，則會繼續保持“懸停”狀態，而不觸發移出事件（修正了使用mouseout事件的一個常見錯誤）。
參數 :
over (Function) : 鼠標移到元素上要觸發的函數
out (Function): 鼠標移出元素要觸發的函數
示例 :
鼠標懸停的表格加上特定的類
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導航</title>
<scriptsrc="jquery.js"></script>
<script>
function dropMenu(obj){
$(obj).each(function(){ //遍歷當前元素下的每個元素
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="#">聯系方式</a>
<ulclass="level2">
<li><ahref="#">聯系方式一</a></li>
<li><ahref="#">聯系方式二</a></li>
<li><ahref="#">聯系方式三</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
效果圖如下：
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
