如何用CSS中TD的元素覆蓋TR？

Question

我有這張表，我想在盤旋時改變顏色，但當鏈接位於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> 

我試着在CSS

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

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

但我有沒有運氣。 這可能沒有使用JavaScript/JQuery的？

Answer 1

您可以使用tr下的僞元素來繪製背景。

z-index將設法將它們堆在內容下。

例如：

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>

Answer 2

這是不尋常的，你做沒有一些JavaScript。 但是，如果你真的想這樣做，你可以檢查這個問題，並自己嘗試。

Question 1

Question 2

希望我可以幫助...