標籤：
hover方法的文法結構為：hover（enter，leave）
hover()當滑鼠移動到元素上時，會觸發第一個方法，當滑鼠移開的時候會觸發第二個方法
複製代碼
<html>
<head>
<title>測試用</title>
<script type=
"text/javascript"
src=
"../jquery-1.3.2.min.js"
></script>
<script type=
"text/javascript"
>
window.onload=init;
function
init(){
$(
"#panel h5.head"
).hover(
function
(){
$(
this
).next().hide();
},
function
(){
$(
this
).next(
"div .content"
).show();
});
}
</script>
</head>
<body>
<div id=
"panel"
>
<h5
class
=
"head"
>什麼事jquery</h5>
<div
class
=
"content"
>
混蛋
</div>
</div>
</body>
</html>
複製代碼
toggle(fn1,fn2,fn3..）這個方法是每次單擊調用下一個方法，如果方法是最後一個，那麼從第一個開始
如果只有2個方法，則是互相轉場效果。
複製代碼
<html>
<head>
<title>測試用</title>
<script type=
"text/javascript"
src=
"../jquery-1.3.2.min.js"
></script>
<script type=
"text/javascript"
>
window.onload=init;
function
init(){
$(
"#panel h5.head"
).toggle(
function
(){
$(
this
).addClass(
"highlight"
);
$(
this
).next().hide();
},
function
(){
$(
this
).removeClass(
"highlight"
);
$(
this
).next(
"div .content"
).show();
});
}
</script>
<style type=
"text/css"
>
.highlight{
background:
#ff3300;
}
</style>
</head>
<body>
<div id=
"panel"
>
<h5
class
=
"head"
>什麼事jquery</h5>
<div
class
=
"content"
>
混蛋
</div>
</div>
</body>
</html>
Jquery——hover與toggle
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
