td（行）+ホバー効果の親を取得

Question

私は背景で色分けされたtdを持っていますが、その行の親を取得して同じ色を設定したいと思います。また、色を変えて親行に再びホバー効果を持たせる。親の行を取得する方法は？

と私は、インラインCSSでこのすべてを行うことができますか？ JSも許可されています。 jqueryなし。

Answer 1

あなたがこのために試みることがあります。

.hoverTable { 
 
    width: 100%; 
 
    border-collapse: collapse; 
 
} 
 

 
.hoverTable td { 
 
    padding: 7px; 
 
    border: #4e95f4 1px solid; 
 
} 
 

 

 
/* Define the default color for all the table rows */ 
 

 
.hoverTable tr { 
 
    background: red; 
 
} 
 

 

 
/* Define the hover highlight color for the table row */ 
 

 
.hoverTable tr:hover { 
 
    background-color: skyblue; 
 
}

<table class="hoverTable"> 
 
    <tr> 
 
    <td>Text 1A</td> 
 
    <td>Text 1B</td> 
 
    <td>Text 1C</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Text 2A</td> 
 
    <td>Text 2B</td> 
 
    <td>Text 2C</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Text 3A</td> 
 
    <td>Text 3B</td> 
 
    <td>Text 3C</td> 
 
    </tr> 
 
</table>