在说明基于通常不可单击的页面元素处理单击事件的能力时,我们构思的界面中已经给出了一些提示——样式表切换器标签(即元素)实际上都是活动的,随时等待用户操作。为了改进界面,我们可以为按钮添加一种翻转状态,以便清楚地表明它们能与鼠标进行某种方式的交互:
.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');
});
});
这里,我们再次使用隐式迭代和事件上下文实现了简洁的代码。现在,当鼠标指针悬停在上时就会出现下面这样的效果:
![817d28e0d1389cc44ac9cd4156829965.png](https://i-blog.csdnimg.cn/blog_migrate/d13a78558ee754ce40f837ba4128af2e.png)
而且,使用.hover()也意味着可以避免JavaScript中的事件传播(event propagation)导致的头痛问题。要理解事件传播的含义,首先必须搞清楚JavaScript如何决定由哪个元素来处理给定的事件。