<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> JQuery mouse color changes over table rows </title>
<Script language = "JavaScript" type = "text/javascript" src = "jquery-1.2.6.pack.js"> </script>
<! -- The above js is JQuery -->
<Script type = "text/javascript">
$
(Function (){// Document loading
$
("# Tb"
). Width
(520
); // Set the table width to 520 pixels
$
("# Tb"
). Height (250); // set the table height to 250 pixels.
$
("# Tb"
). Css
("Background-color", "#000000"
); // Set the background color of the table to black.
$
("Tr"
). Attr
("BgColor", "# FFFFFF"
); // Add the background attribute of the table row and set it to white,
Note that the attribute here is not bgcolor but bgColor.
$
("Td"
). Append
(""
); // Add spaces to all cells
$
("Tr"
). Hover
(
Function (){
$
(This). AddClass
("Hover"
); // Add the hover style with the mouse
},
Function (){
$
(This). RemoveClass
("Hover"
); // Move the mouse away to remove the hover Style
}
);
});
</Script>
<Style type = "text/css">
. Hover {background-color: # FF0000;}/* The color when the mouse passes */
</Style>
</Head>
<Body>
<Table id = "tb" border = "0" cellpadding = "0" cellspacing = "1">
<Tr> <td> </tr>
<Tr> <td> </tr>
<Tr> <td> </tr>
<Tr> <td> </tr>
<Tr> <td> </tr>
<Tr> <td> </tr>
<Tr> <td> </tr>
<Tr> <td> </tr>
<Tr> <td> </tr>
<Tr> <td> </tr>
</Table>
</Body>
</Html>
Note: Do not set the specified color for cells. Otherwise, the color will not change!
Code:
