一般在动态菜单或图片切换等应用中需要使用这种效果。其中，需要使用jQuery的函数ready()、mouseover()。使用ready()函数在文档加载完成后注册DIV的鼠标悬停事件，在鼠标悬停事件中做出响应。
1．jQuery函数ready()--文档加载完成
该函数表示当DOM载入就绪、可以查询及操纵时绑定一个要执行的函数。其语法形式如下：
- ready(fn)
注：这是事件模块中最重要的一个函数，因为它可以极大地提高Web应用程序的响应速度。这个方法纯粹是对向Window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪、能够读取并操纵时立即调用所绑定的函数。
2．jQuery函数mouseover()--鼠标悬停事件
该函数在每一个匹配元素的鼠标悬停事件中绑定一个处理函数。其语法形式如下：
- mouseover(fn)
注：fn表示需要绑定的函数。
HTML代码和CSS样式参考光盘内容。下面直接看一下JavaScript功能实现：
- 1 <script type="text/javascript">
- 2 $(function(){
- 3 $("#div1").mouseover(function(){ //鼠标悬停事件
- 4 alert("层被选择");
- 5 });
- 6 });
- 7 </script>
效果如图3.1所示。上面的示例使用jQuery的mouseover()函数实现鼠标对层的悬停选取。在jQuery中还有一个函数也可以作为鼠标悬停事件处理函数使用，即hover()函数。它和mouseover()的区别是：hover()不仅可以模拟鼠标的悬停，也会对鼠标的离开做出响应，并修正了鼠标离开mouseout()的一些错误。
 |
| 图3.1 鼠标选择DIV层 |
3．jQuery函数hover()--鼠标悬停/离开切换事件
该方法模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）。其语法形式如下：
- hover(over,out)
注：当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测，如果是，则会继续保持"悬停"状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。over，鼠标悬停在元素上的函数，out，鼠标离开元素的函数。
我们用hover()替换mouseover()：
- 1 <script type="text/javascript">
- 2 $(function(){
- 3 $("#div1").hover(function(){ //鼠标悬停/离开切换事件
- 4 alert("层被选择");
- 5 },
- 6 function(){
- 7 alert("层被反选");
- 8 }
- 9 );
- 10 });
- 11</script>
因为hover()可以对两个事件都做出响应，所以在hover()中使用了两个function参数，第一个是鼠标悬停事件，第二个是修正了的鼠标离开事件。当鼠标悬停在DIV上时效果如图3.1所示，当鼠标离开DIV时效果如图3.2所示。
 |
| 图3.2 鼠标离开DIV层 |
