jQuery中mouseover事件用法实例

下面是针对“jQuery中mouseover事件用法实例”的详细攻略：

1. 什么是mouseover事件

mouseover事件是JavaScript中常用的事件之一，当鼠标光标进入一个页面元素（如div、a、img等）时会触发该事件。在jQuery中，该事件可以通过.mouseover()方法绑定到页面元素上。当鼠标光标进入该元素时，bound function（即预先定义好的函数）会被执行。

2. jQuery中mouseover事件用法实例

下面给出两个jQuery中mouseover事件的实例。

2.1 示例1：鼠标悬停改变颜色

在该例中，我们会实现当鼠标悬停在页面上的按钮上时，该按钮的颜色会改变。html代码如下：

<button>悬停我，改变颜色</button>

实现代码如下：

// 选中按钮元素
var $button = $('button');

// 定义函数: 鼠标进入按钮时改变颜色
function changeColor(){
  $button.css({ background: 'red' });
}

// 定义函数：鼠标离开按钮时恢复颜色
function resumeColor(){
  $button.css({ background: 'white' });
}

// 绑定mouseover事件和mouseout事件
$button
  .mouseover(changeColor)
  .mouseout(resumeColor);

2.2 示例2：显示隐藏菜单

在该例中，我们会实现鼠标悬停在导航栏上时，显示隐藏的子菜单。html代码如下：

<nav>
  <ul>
    <li class="has-subnav">
      <a href="#">主导航1</a>
      <ul class="subnav">
        <li><a href="#">子导航1-1</a></li>
        <li><a href="#">子导航1-2</a></li>
      </ul>
    </li>
    <li><a href="#">主导航2</a></li>
    <li><a href="#">主导航3</a></li>
  </ul>
</nav>

实现代码如下：

// 选中所有含有二级菜单的导航元素
var $navWithSubmenu = $('li.has-subnav');

// 当鼠标光标进入元素时，显示该元素下的二级菜单
function showSubmenu(){
  $(this).find('.subnav').show();
}

// 当鼠标光标离开元素时，隐藏该元素下的二级菜单
function hideSubmenu(){
  $(this).find('.subnav').hide();
}

// 绑定mouseover事件和mouseout事件
$navWithSubmenu
  .mouseover(showSubmenu)
  .mouseout(hideSubmenu);

以上就是两个jQuery中mouseover事件的实例说明。希望对您理解该事件的使用有所帮助。