Event propagation

In illustrating the ability of the click event to operate on normally non-clickable page elements, we have crafted an interface that gives few hints that the style switcher label—actually just an <h3> element—is actually a live part of the page awaiting user interaction. To remedy this, we can give it a rollover state, making it clear that it interacts in some way with the mouse:

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

The CSS specification includes a pseudo-class called :hover, which allows a stylesheet to affect an element's appearance when the user's mouse cursor hovers over it. This would certainly solve our problem in this instance, but instead, we will take this opportunity to introduce jQuery's .hover() method, which allows us to use JavaScript to change an element's styling—and indeed, perform any arbitrary action—both when the mouse cursor enters the element and when it leaves the element.

The .hover() method takes two function arguments, unlike...