使用 CSS 突出显示两个相邻表中的行

Question

我的布局有两个相邻的 table。当一个 table 中的一行悬停时，我想对两个 table 中的行中的单元格应用相同的样式。

只有 css 才有可能吗？

table{
    display: inline-block;
    
}
td{
    border:1px solid grey;
}
table#lhs tr:hover{
    background-color:green;
}
table#lhs tr:hover {
    background-color:green;
}

<table id="lhs">
    <tr>
        <td>lhs row 1</td>       
    </tr>
    <tr>
        <td>lhs row 2</td>       
    </tr>
    <tr>
        <td>lhs row 3</td>       
    </tr>
</table>
<table id="rhs">
    <tr>
        <td>rhs row 1</td>
    </tr>
    <tr>
        <td>rhs row 2</td>
    </tr>
    <tr>
        <td>rhs row 3</td>
    </tr>
</table>

Answer 1

我想到了这个，这似乎与您的要求非常接近：

table {
    display: inline-block;
}
div {
    overflow:hidden;
    float:left;
}
td {
    border:1px solid grey;
}
table#lhs tr:hover {
    background-color:green;
}
table#lhs tr:hover {
    background-color:green;
}
#lhs td:hover::before {
    background-color: green;
    content:'[=10=]a0';
    position: absolute;
    width: 10000px;
    z-index: -1;
}
td {
    position: relative;
}

<div>
    <table id="lhs">
        <tr>
            <td>lhs row 1</td>
        </tr>
        <tr>
            <td>lhs row 2</td>
        </tr>
        <tr>
            <td>lhs row 3</td>
        </tr>
    </table>
    <table id="rhs">
        <tr>
            <td>rhs row 1</td>
        </tr>
        <tr>
            <td>rhs row 2</td>
        </tr>
        <tr>
            <td>rhs row 3</td>
        </tr>
    </table>
</div>

使用 CSS 突出显示两个相邻表中的行

Highlight rows across two adjacent tables with CSS

html

css

hover