首页 > 编程笔记 > JavaScript笔记 > jQuery事件

jQuery mouseover和mouseout事件

当用户将鼠标指针移到某个元素上时，就会触发 mouseover 事件。当用户将鼠标指针移出某个元素时，就会触发 mouseout 事件。mouseover 和 mouseout 平常都是形影不离的。

mouseover 和 mouseout 分别用于控制鼠标指针“移入”和“移出”这两种状态。例如，在下拉菜单导航中，鼠标指针移入会显示二级导航，鼠标指针移出则会收起二级导航。

举例：移入和移出 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title></title>
  6.     <script src="js/jquery-1.12.4.min.js"></script>
  7.     <script>
  8.         $(function () {
  9.             $("div").mouseover(function(){
  10.                 $(this).css("color", "red");
  11.             })
  12.             $("div").mouseout(function () {
  13.                 $(this).css("color", "black");
  14.             })
  15.         })
  16.     </script>
  17. </head>
  18. <body>
  19.     <div>新宝库</div>
  20. </body>
  21. </html>
预览效果如图 1 所示。
鼠标指针移入和移出
图 1：鼠标指针移入和移出

这里的$(this) 指的其实就是触发当前事件的元素，也就是 div 元素。在这个例子中，$(this)等价于$("div")。$(this)的使用是非常复杂的，这里我们只是让初学者熟悉一下，后面再给小伙伴们详细讲解。

上面这个例子虽然简单，但是方法已经教给大家了。大家可以尝试使用 mouseover 和 mouseout 这两个事件来设计下拉菜单效果。

举例：链式调用 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title></title>
  6.     <script src="js/jquery-1.12.4.min.js"></script>
  7.     <script>
  8.         $(function () {
  9.             $("div").mouseover(function(){
  10.                 $(this).css("color", "red");
  11.             }).mouseout(function () {
  12.                 $(this).css("color", "black");
  13.             })
  14.         })
  15.     </script>
  16. </head>
  17. <body>
  18.     <div>新宝库</div>
  19. </body>
  20. </html>
预览效果如图 2 所示。
链式调用
图 2:：链式调用

分析： 
  1. $("div").mouseover(function(){
  2.     $(this).css("color", "red");
  3. }).mouseout(function () {
  4.     $(this).css("color", "black");
  5. })

上面的代码其实等价于： 
  1. $("div").mouseover(function(){
  2.     $(this).css("color", "red");
  3. })
  4. $("div").mouseout(function () {
  5.     $(this).css("color", "black");
  6. })
在 jQuery 中，如果对同一个对象进行多种操作，则可以使用链式调用的语法。链式调用是 jQuery 中的经典语法之一，不仅可以节省代码量，还可以提高代码的性能和效率。

所有教程

优秀文章