CODEWITHSUNDEEP
css
MJ Doe
MJ Doe

Reputation: 21

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

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?

Upvotes: 0

Views: 228

Answers (2)

CallMeLeonardo
CallMeLeonardo

Reputation: 86

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

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105893

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>

Upvotes: 1

Related Questions