HTML and CSS Reference
In-Depth Information
Now we need to add our code into 03.js . Going into more detail about the code, the steps it will follow are
as follows:
hover event for each <code> tag: one for when the mouse enters the hover
state, and one for when it exits the hover.
Bind two functions to the
<code> element using jQuery's .text() method; use a simple regular
expression to remove any characters that are not alphanumeric (to remove the opening and closing
brackets); and cast the matched string as a String to prevent a bug.
Detect the tag name inside the
.data() ;
on hover, find matching elements, store the original background color on each element using
then change the background color to yellow using .css() .
.data() ; then restore it using .css() .
When the hover ends, retrieve the original background color with
* Exercise 02-03, Realtime Web Apps
* @author Jason Lengstorf <>
* @author Phil Leggetter <>
(function($) {
// Highlights the element contained in the <code> tag
function() {
var elem = $(getElementName(this)),
bg = elem.css("background");'bg-orig', bg).css({ "background": "yellow" });
function() {
var elem = $(getElementName(this)),
bg ='bg-orig');
$(elem).css({ "background": bg });
* Retrieves the element name contained within a code tag
function getElementName(element) {
return String($(element).text().match(/\w+/));
save your code; then reload the htMl and mouse over one of the <code> tags to see the results (shown
in Figure 2-3 ).
Search WWH ::

Custom Search