js hover 触发事件_JQ基础（5）事件的传播

在说明基于通常不可单击的页面元素处理单击事件的能力时，我们构思的界面中已经给出了一些提示——样式表切换器标签（即元素）实际上都是活动的，随时等待用户操作。为了改进界面，我们可以为按钮添加一种翻转状态，以便清楚地表明它们能与鼠标进行某种方式的交互：

.hover {  
 cursor: pointer;  
 background-color: #afa;  
}  

CSS规范加入了一个名叫:hover的伪类选择符，这个选择符可以让样式表在用户鼠标指针悬停在某个元素上时，影响元素的外观。这个伪类选择符在某种程度上可以帮我们解决问题，但 在这里，我们要介绍jQuery的.hover方法。这个方法可以让我们在鼠标指针进入元素和离开元素时，通过JavaScript来改变元素的样式——事实上是可以执行任意操作。同前面介绍的简单事件方法不同，.hover()方法接受两个函数参数。第一个函数会在鼠标指针进入被选择的元素时执行，而第二个函数会在鼠标指针离开该元素时触发。我们可以在这些时候修改应用到按钮上的类，从而实现翻转效果，我们可以参考下面的代码：

$(document).ready(function() { 
 $('#switcher h3').hover(function() { 
 $(this).addClass('hover'); 
 }, function() { 
 $(this).removeClass('hover'); 
 }); 
});

这里，我们再次使用隐式迭代和事件上下文实现了简洁的代码。现在，当鼠标指针悬停在上时就会出现下面这样的效果：

而且，使用.hover()也意味着可以避免JavaScript中的事件传播（event propagation）导致的头痛问题。要理解事件传播的含义，首先必须搞清楚JavaScript如何决定由哪个元素来处理给定的事件。