获取td（行）的父级+悬停效果

Question

我有td的背景颜色，但我想让他们的行父和设置相同的颜色。还要在其父行上使用不同颜色再次悬停效果。那么......如何获得父行？

我能用内联css完成所有这些吗？ JS也被允许。没有jquery。

Answer 1

你可以试试这个：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;