HTML and CSS Reference
In-Depth Information
$(“p”).mouseleave(function () {
$(this).removeClass(“highlighted”);
});
})
</script>
<style type=”text/css” media=”screen”>
p { padding: .5em;}
p.highlighted { background: yellow; }
</style>
</head>
<body>
16
<p>
This is the first paragraph on the page.
</p>
<p>
This is the second paragraph on the page.
</p>
</body>
</html>
FIGURE 16.5
No paragraphs are
highlighted initially.
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 yellow 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
whenever the user moves their mouse over or away from a paragraph. As you can see in
Figure 16.6, when the user's mouse is over the paragraph, the class
highlighted
is
applied to it. When the mouse moves away, the class is removed.
