Using CSS to highlight entire row

Question

I am using the below code to highlight a table rows, but it does not highlight the row.

It highlight only the current cell and it only turns the font color to white when i hover over the actual font.

Is there something I am missing?

HTML and CSS:

.schedule tr:not(:first-child) :hover{
        font-weight:bold;
        cursor:default;
        background-color:#B80D9F;
        color:white;
    }
    
    .schedule{
        border-spacing:0px;
    }

 <table class="schedule" width="90%">
        <tbody>
            <tr>
                <td style="width:50%">hello1</td>
                <td style="width:50%">123</td>
            </tr>
            <tr>
                <td style="width:50%">hello2</td>
                <td style="width:50%">123</td>
            </tr>
        </tbody>
    </table>

Update:

All the answers below are correct, but do not address the second issue with the font not changing to white when a <a> tag is used.

Why would the font-color not change?

anchors default font color is blue. so you have to specify your styles for anchor tags separately. — Suresh Ponnukalai
– Suresh Ponnukalai, Commented Dec 1, 2015 at 6:11

Arnaud Gueras · Accepted Answer · 2015-12-01 06:00:53Z

3

Remove the space before :hover, because actually your try to access to the children of tr, not the tr itself

And color is setted with custom style on a, you have to add another css selector on a to change its color :

.schedule tr:not(:first-child):hover a{
   color:white;
}

edited Dec 1, 2015 at 6:00

answered Dec 1, 2015 at 5:21

Arnaud Gueras

2,06215 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Marcel Over a year ago

I cannot believe it was that simple... Thank you :)

Marcel Over a year ago

One last thing... It seems if the text contains a <a> it does not change the font color. Can you see why?

Harsh Sanghani · Accepted Answer · 2015-12-01 05:21:31Z

0

Change your css as following, you have mistake in your rule :-

.schedule tr:not(:first-child):hover{
    font-weight:bold;
    cursor:default;
    background-color:#B80D9F;
    color:white;
}

It may help you.

answered Dec 1, 2015 at 5:21

Harsh Sanghani

1,7421 gold badge15 silver badges32 bronze badges

3 Comments

Helping Hands Over a year ago

It would better help for OP if you explain what mistake he/she did.

Harsh Sanghani Over a year ago

I have already added first line that you have mistake in your rule :)

Helping Hands Over a year ago

I understand that but still if you try to be more specific then it would be good for OP. For ex: answer given by @Arnaud , So that OP can know that exactly where and in which line/rule he did mistake. :)

JGCW · Accepted Answer · 2015-12-01 05:27:23Z

0

change your css to:

.schedule tr:not(:first-child):hover{
   font-weight:bold;
   cursor:default;
   background-color:#B80D9F;
   color:white;
}

.schedule{
   border-spacing:0px;
}

the issue you had was the space before the :hover

answered Dec 1, 2015 at 5:27

JGCW

1,5291 gold badge13 silver badges27 bronze badges

Comments

Rovi · Accepted Answer · 2015-12-01 05:27:37Z

0

the mistake is with the space

.schedule tr:not(:first-child):hover{
    font-weight:bold;
    cursor:default;
    background-color:#B80D9F;
    color:white;
}

.schedule{
    border-spacing:0px;
}

answered Dec 1, 2015 at 5:27

Rovi

2571 silver badge3 bronze badges

Comments

Chonchol Mahmud · Accepted Answer · 2015-12-01 07:30:42Z

0

All things updated.Please see working Link and enjoy!! Spacing problem before :hover

HTML:

<table class="schedule" width="90%">
<tbody>
    <tr>
        <td style="width:50%">hello1</td>
        <td style="width:50%">123</td>
    </tr>
    <tr>
        <td style="width:50%"><a href="">hello2</a></td>
        <td style="width:50%"><a href="">123</a></td>
    </tr>
</tbody>

CSS:

 .schedule tr:not(:first-child):hover{
  font-weight:bold;
  cursor:default;
  background-color:#B80D9F;
  color:white;
}
 .schedule tr:not(:first-child):hover a{
  color:white;
  text-decoration:none;
 }
.schedule tr:not(:first-child) a{
 text-decoration:none;
 color:black;
 }
.schedule{
 border-spacing:0px;
}

edited Dec 1, 2015 at 7:30

answered Dec 1, 2015 at 5:26

Chonchol Mahmud

2,7338 gold badges42 silver badges77 bronze badges

Collectives™ on Stack Overflow

Using CSS to highlight entire row

5 Answers 5

2 Comments

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related