Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

ptg16476052

Modifying Content on the Page 509

18

$(this).removeClass("highlighted");
});
})

On this page, I have two paragraphs that have no classes assigned to them by default.
I also have a style sheet that applies a gray background to any paragraph with the class
highlighted. Most important, I have the following two event handlers:

$("p").mouseenter(function () {
$(this).addClass("highlighted");
});
$("p").mouseleave(function () {
$(this).removeClass("highlighted");
});

In this example, I use the jQuery mouseenter and mouseleave events to fire events when-
ever the user moves his mouse over or away from a paragraph. As you can see in Figure
18.6, when the user’s mouse is over the paragraph, the class highlighted is applied to it.
When the mou se moves away, the class is removed.

FIGURE 18.5
No paragraphs are
highlighted initially.

FIGURE 18.6
Paragraphs are
highlighted when
the mouse is over
them.