troubleshooting Question

CSS html table hover

Avatar of maqskywalker
maqskywalker asked on
2 Comments1 Solution801 ViewsLast Modified:
Hi experts

I have a html table. This is the code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<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;


<table width="800" border="0" id="MyTable">
    <td>Los Angeles</td>

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..
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 2 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 2 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros