<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
$("a").hover(
10 function(event){
11 $(this).addClass('hover');
12 },
13 function(){
14 $(this).removeClass('hover');
15 }
16 );
});
</script>
<style>
ul{
width:200px;
}
ul li ul{
list-style:none;
margin:5px;
width:200px; }
a{
display:block;
border-bottom:1px solid #fff;
text-decoration:none;
background:#00f;
color:#fff;
padding:0.5em;
}
li{
display:inline;
}
.hover{
background:#000;
}
</style>
</head>
<ul>
<li><a href="#">Development</a></li>
<li><a href="#">Books</a></li>
<li><a href="#">Programming</a></li>
<li><a href="#">DBA</a></li>
</ul>
<body>
</body>
</html>

显示效果如下:

aaarticlea/png;base64,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" alt="" />

这个案例用以复习前面学过的.hover()方法。悬停事件包含两个事件处理函数,一个鼠标指针移到指定元素上时被调用,另一个在鼠标指针离开指定元素时被调用。

05-11 13:17