td：悬停突出显示该td的th

Question

我有一张桌子。现在我想要的是当我突出显示例如Jackson（td）时，'th'与那些亮点一致......所以对于这个例子它会是姓？

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Points</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

的CSS：

tbody tr:hover td.text-left {
background-color: #0062a2 !important;
}

由于

Answer 1

您可以获取悬停index的{​​{1}}，然后找到具有相同索引的相关td，如下所示：

th

Example fiddle

Answer 2

这只能在使用伪元素的CSS中完成，例如使用伪元素:before。

我们的想法是设置伪元素background-color并使用height:1000%; top:-1000%;使其溢出（这会处理最多10行，为处理更多行，计算为100% * number rows to handle，例如10000 100行等百分比......）。该伪元素绝对定位为z-index低于TABLE的TD。在TD :hover上，由于伪元素溢出，特定的TH得到了背景颜色的视觉上的变化。 TABLE需要overflow: hidden;。

＆＃13;

＆＃13;

table {
    overflow: hidden;
}
td {
    background-color: #fff;
    outline: 2px solid #fff;
    border:1px solid #000;
}
table, td {
    position: relative;
}
td:before {
    content:'\00a0';
    background-color: red;
    left: -1000%;
    position: absolute;
    transition: background-color 200ms linear;
}
td:hover:before {
    background-color: #0062a2;
    left:0;
    z-index: -1;
    height:1000%;
    width:100%;
    top:-1000%;
}
td:hover {
    background-color: #0062a2;
    transition: background-color 200ms linear;
}

＆＃13;

<table style="width:100%">
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Points</th>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>Adam</td>
        <td>Johnson</td>
        <td>67</td>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>
        <td>68</td>
    </tr>
    <tr>
        <td>Adam</td>
        <td>Smith</td>
        <td>27</td>
    </tr>
    <tr>
        <td>Frank</td>
        <td>Mayer</td>
        <td>56</td>
    </tr>
    <tr>
        <td>Sam</td>
        <td>Wickel</td>
        <td>67</td>
    </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

你甚至可以点击TH元素来突出显示特定的列，这里只是一个更复杂的例子，仅在CSS中：

＆＃13;

＆＃13;

#lbl_tbl_col_none {
    font-weight: bold;
    text-decoration: underline;
    color: blue;
    cursor: pointer;
}
.not-visible {
    visibility: hidden;
}
.hidden {
    display: none;
}
th label {
    display: block;
    cursor: pointer;
}

.tbl_col_rd:checked ~ #tbl_col_none, .tbl_col_rd:checked ~ #lbl_tbl_col_none {
    visibility: visible;
}

#tbl_col_1:checked ~ table th:first-child, #tbl_col_2:checked ~ table th:nth-child(2), #tbl_col_3:checked ~ table th:nth-child(3) {
    background: #4462a2;
    color: white;
    outline: 2px solid #fff;
}

#tbl_col_1:checked ~ table td:first-child,#tbl_col_2:checked ~ table td:nth-child(2),  #tbl_col_3:checked ~ table td:nth-child(3) {
    background: #7167DB;
    font-weight: bold;
    color: white;
    text-align: center;
}

table {
    overflow: hidden;
    padding-left: 1.5em;
}
tbody {
    counter-reset: rowNumber;
}
tr {
    counter-increment: rowNumber;
}
thead tr:after {
    content:"#";
    position: absolute;
    left:0;
}
tbody tr:after {
    content: counter(rowNumber);
    min-width: 1em;
    padding: 0.1em;
    position: absolute;
    left:0;
    border-bottom: 1px solid #000;
}

tbody tr:hover td {
    font-weight: bold;
    background-color: #ddd;
}
tbody tr:hover:after {
    background-color: #0062a2;
    color: #fff;
    border-radius: 20px 100px;
    text-align: center;
    font-weight: bold;
    transition: all 250ms;
    transition-property: border-radius, padding, text-indent, color, background-color;
    padding: 0.1em 1em;
    text-indent: -20px;
    vertical-align: text-top;
    z-index: -2;
}
td {
    background-color: #fff;
    outline: 2px solid #fff;
    border:1px solid #000;
}
table, td {
    position: relative;
}
tbody td:before {
    left: -1000%;
    position: absolute;
    content:'\00a0';
    background-color: red;
    transition: background-color 200ms linear;
}
td:hover:before {
    background-color: #0062a2;
    left:0;
    z-index: -1;
    height:100000%;
    width:100%;
    top:-100000%;
}
tbody tr td:hover {
    background-color: #0062a2;
    transition: background-color 200ms linear;
    font-weight: bold;
    color: white;
}

＆＃13;

<input type="radio" id="tbl_col_1" class="tbl_col_rd hidden" name="tbl_col_rd">
<input type="radio" id="tbl_col_2" class="tbl_col_rd hidden" name="tbl_col_rd">
<input type="radio" id="tbl_col_3" class="tbl_col_rd hidden" name="tbl_col_rd">
<input type="radio" id="tbl_col_none" class="hidden" name="tbl_col_rd">
<label id="lbl_tbl_col_none" for="tbl_col_none" class="not-visible">Reset selection</label>
<table style="width:100%">
    <thead>
        <tr>
            <th><label for="tbl_col_1">Firstname</label></th>
            <th><label for="tbl_col_2">Lastname</label></th>
            <th><label for="tbl_col_3">Points</label></th>
        </tr>
    </thead>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>Adam</td>
        <td>Johnson</td>
        <td>67</td>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>
        <td>68</td>
    </tr>
    <tr>
        <td>Adam</td>
        <td>Smith</td>
        <td>27</td>
    </tr>
    <tr>
        <td>Frank</td>
        <td>Mayer</td>
        <td>56</td>
    </tr>
    <tr>
        <td>Sam</td>
        <td>Wickel</td>
        <td>67</td>
    </tr>
    <tr>
        <td>Adam</td>
        <td>Smith</td>
        <td>27</td>
    </tr>
    <tr>
        <td>Frank</td>
        <td>Mayer</td>
        <td>56</td>
    </tr>
    <tr>
        <td>Sam</td>
        <td>Wickel</td>
        <td>67</td>
    </tr>
    <tr>
        <td>Adam</td>
        <td>Smith</td>
        <td>27</td>
    </tr>
    <tr>
        <td>Frank</td>
        <td>Mayer</td>
        <td>56</td>
    </tr>
    <tr>
        <td>Sam</td>
        <td>Wickel</td>
        <td>67</td>
    </tr>
    <tr>
        <td>Adam</td>
        <td>Smith</td>
        <td>27</td>
    </tr>
    <tr>
        <td>Frank</td>
        <td>Mayer</td>
        <td>56</td>
    </tr>
    <tr>
        <td>Sam</td>
        <td>Wickel</td>
        <td>67</td>
    </tr>
</table>

＆＃13;

＆＃13;

＆＃13;