鼠标点击事件用的方法是 .click() .. 双击事件用的是 .dblclick() 方法 … 鼠标在悬停的时候，可以使用 .hover() 方法 …

这些都是跟鼠标事件相关的方法 … 一般只要你能想到的关于鼠标的动作，都会有一个相应的事件还有一个用来绑定事件处理程序的 jQuery 方法 …

这个视频我们来了解一下这些跟鼠标事件相关的方法 …

测试

在图像的下面有一个 h6 标题元素 .. 我们可以在图像上添加一个点击事件的处理程序，让它在点击图像的时候显示或者隐藏下面的这个标题 …

下面我们可以打开这个页面嵌入的脚本文件 … 可以先去设置一下标题的默认的状态，默认把它们隐藏起来 …

先找到所有在 .album 类下面的 h6 元素 … 用 css() 方法，设置一下 display 属性为 none … 这样可以把它们都隐藏起来 ..

$( '.album h6' ).css( 'display', 'none' );

然后再去选择所有的在 .album 类下面的 img 元素 … 使用它的 click 方法，去为元素绑定一个 click 事件的处理程序

$( '.album img' ).click(function(){
$( this ).siblings( 'h6' ).toggle();
});

用一个函数作为这个方法的参数 … 在这个函数里，可以去调用当前元素的 h6 元素这个兄弟元素 … 再调用这个 h6 元素的 .toggle() 方法 …

保存 … 回到浏览器 …

点击图像 … 触发 click 事件，执行 .click() 方法里面的这个事件处理器 … 这个处理器做的事就是调用这个图像的兄弟元素，h6 元素的 toggle() 方法 …

这样当在元素隐藏的时候，会让它显示出来，如果正在显示的话，会把它隐藏起来 …

其它事件

下面，我们可以试一下其它的跟鼠标相关的事件的事件处理器 … （#script）

找到 .click() 方法 .. 把它换成 .dblclick() ，双击事件的处理器 …

现在， 双击图像，才会去显示或者隐藏标题 …

再试试 hover … hover 这个事件会在鼠标指针在元素上还有离开元素的时候触发 …

（#html）把鼠标放在图像上 … 会显示标题 … 因为会触发 hover 事件 … 鼠标离开的时候 … 也会触发 hover 事件 … 所以标题会被隐藏起来 ..

如果你只想在鼠标放在元素上的时候去做一些事 … 可以使用 .mouseenter() 这个处理器 … 如果想在鼠标离开的时候做点事 … 可以使用 .mouseleave()