Avatar of maqskywalker
maqskywalker asked on

CSS html table hover

Hi experts

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>

Open in new window


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..
CSSHTML

Avatar of undefined
Last Comment
Chris Stanyon

8/22/2022 - Mon
SOLUTION
Argenti

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER CERTIFIED SOLUTION
Chris Stanyon

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck