maqskywalker
asked on
CSS html table hover
Hi experts
I have a html table. This is the code.
This table has 5 rows. When you hover over rows 2 through row 5. They are highlighted blue.
When you hover over row 1 it is highlighted red.
How would I change my css code to do the following:
When I hover over rows 2 through row 5. They are highlighted blue.
But when I hover over row 1, row 1 shouldn't be highlighted at all.
In this particular example I know I could just switch red color to white because my background is white, but I want to know if there is a way to do it like say have the highlight of row 1 to be transparent or not highlight row 1 at all.
I only want rows 2 through 4 to be highlighted blue when I hover my mouse over those rows..
I have a html table. This is the code.
<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#MyTable tr:first-child:hover TD{
background: #FF0000;
}
#MyTable TR:hover TD
{
background: #0000FF;
}
</style>
</head>
<body>
<table width="800" border="0" id="MyTable">
<tr>
<td>TeamID</td>
<td>TeamCity</td>
<td>TeamName</td>
</tr>
<tr>
<td>1</td>
<td>Los Angeles</td>
<td>Lakers</td>
</tr>
<tr>
<td>2</td>
<td>Miami</td>
<td>Heat</td>
</tr>
<tr>
<td>3</td>
<td>Sacramento</td>
<td>Kings</td>
</tr>
<tr>
<td>4</td>
<td>Houston</td>
<td>Rockets</td>
</tr>
</table>
</body>
</html>
This table has 5 rows. When you hover over rows 2 through row 5. They are highlighted blue.
When you hover over row 1 it is highlighted red.
How would I change my css code to do the following:
When I hover over rows 2 through row 5. They are highlighted blue.
But when I hover over row 1, row 1 shouldn't be highlighted at all.
In this particular example I know I could just switch red color to white because my background is white, but I want to know if there is a way to do it like say have the highlight of row 1 to be transparent or not highlight row 1 at all.
I only want rows 2 through 4 to be highlighted blue when I hover my mouse over those rows..
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.