在jQuery中，有两个方法用于事件的切换。一个是方法hover(),另一个是方法toggle()。
所谓切换事件，即有两个以上的事件绑定于一个元素，在元素的行为动作间进行切换。如果一个超链接标记<a>，若想实现当鼠标悬停时触发一个事件，鼠标移出时又触发另一个事件。就可以调用jQuery中的hover()方法轻松实现。
hover()功能是当鼠标移动到所选的元素上面时，执行指定的第一个函数；当鼠标移除这个元素时，执行指定的第二个函数，其语法格式如下：
hover(over,out)
下面代码是等价的：
代码1：
$("a").hover(function(){
//执行代码一
},function(){
//执行代码二
})
代码2：
$("a").mouseover(function(){
//执行代码一
})
$("a").mouseout(function(){
//执行代码二
})
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <title>切换事件</title> 6 <style> 7 body{font-size: 13px;} 8 .clsFrame{border: solid 1px #666;width: 220px;} 9 .clsFrame .clsTitle{background-color: #eee;padding: 5px;font-weight: bold;} 10 .clsFrame .clsContent{padding: 5px;display: none;} 11 </style> 12 <script src="jquery.js"></script> 13 <script> 14 $(function(){ 15 $(".clsTitle").hover(function(){ 16 $(".clsContent").show(); 17 },function(){ 18 $(".clsContent").hide(); 19 }) 20 }) 21 </script> 22 </head> 23 <body> 24 <h3>功能描述：</h3> 25 <p>在页面中，创建一个<div>标记,在该标记中，设置另外两个<div>元素。</p> 26 <p>一个用于显示标题。另一个则用于显示内容。调用jQuery中的hover()方法。</p> 27 <p>将鼠标移到标题时，自动显示内容；鼠标移出标题时，关闭显示的内容。</p> 28 <br /> 29 <div class="clsFrame"> 30 <div class="clsTitle">jQuery简介</div> 31 <div class="clsContent"> jQuery的主旨是：以更少的代码，实现更多的功能（Write Less Do More）。</div> 32 </div> 33 </body> 34 </html>
结果如下图所示：
