How do I override TR with an element inside TD with CSS?

Question

I have this table that I want to change color when hovered, but will also change different color when a link is inside the TD.

<table>
    <tr>
        <td>Hovering this part will make the whole TR bgcolor red</td>
        <td>Hovering this part will make the whole TR bgcolor red</td>
        <td>Hovering this part will make the whole TR bgcolor red</td>
    </tr>

    <tr>
        <td>Hovering this part will make the whole TR bgcolor red</td>
        <td>Hovering this part will make the whole TR bgcolor red</td>
        <td>Hovering this part will make the whole TR bgcolor red</td>
    </tr>

    <tr>
        <td>Hovering this part will make the whole TR bgcolor red</td>
        <td>Hovering this part will make the whole TR bgcolor red</td>
        <td>
            <a>HOVERING THIS LINK WILL MAKE WHOLE TR BG COLOR BLUE</a>
        </td>
    </tr>
</table>

I've tried in CSS

table tr:hover:not(table td a) {
    background-color: red !important;
}

table tr:hover{ 
    background-color: blue;
}

But I have no luck. Is this possible without using Javascript/Jquery?

it's not possible with CSS alone, since CSS can't select parent elements — Johannes, Apr 12 '17 at 12:02
this could eventually be a fix ? https://jsfiddle.net/8h6u711v/3/ — Vincent G, Apr 12 '17 at 12:03

score 1 · Answer 1 · answered Apr 12 '17 at 12:07

you may use pseudo elements layed under tr that will be used to draw the backgrounds.

z-index will manage to pile them under contents.

example:

table tr {
  position: relative;
}

table tr a:before,
tr:before {
  content: '';
  position: absolute;
  float:left;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -2;
}
table tr:hover:before {
  background: red;  
}

table tr a:hover:before {
  z-index: -1;
  background-color: blue;
}

/*and  eventually: */a {display:block;background:rgba(0,0,0,0.0001);}a:hover {color:white;}

<table>
    <tr>
        <td>Hovering this part will make the whole TR bgcolor red</td>
        <td>Hovering this part will make the whole TR bgcolor red</td>
        <td>Hovering this part will make the whole TR bgcolor red</td>
    </tr>

    <tr>
        <td>Hovering this part will make the whole TR bgcolor red</td>
        <td>Hovering this part will make the whole TR bgcolor red</td>
        <td>Hovering this part will make the whole TR bgcolor red</td>
    </tr>

    <tr>
        <td>Hovering this part will make the whole TR bgcolor red</td>
        <td>Hovering this part will make the whole TR bgcolor red</td>
        <td>
            <a>HOVERING THIS LINK WILL MAKE WHOLE TR BG COLOR BLUE</a>
        </td>
    </tr>
</table>

score 0 · Answer 2 · edited May 23 '17 at 11:54

0

It's unusual that you do it without some javascript. But if you really want to do it, you can check this questions out and try it by yourself.

Question 1

Question 2

Hope I could help...

edited May 23 '17 at 11:54

Community

1
1

answered Apr 12 '17 at 12:08

CallMeLeonardo

86
13

those questions/answers are about sibblings, not parents. it won't help :( Your answer looks much more like a comment than else ;) – G-Cyrillus Apr 12 '17 at 12:10
@GCyrillus Can't comment because of my reputation points :) But thanks for correcting my answer. Obviously you're right ;) – CallMeLeonardo Apr 12 '17 at 12:13

How do I override TR with an element inside TD with CSS?

2 Answers2