Question

我连续有4个细胞。我希望当我在第一个或第二个细胞上盘旋时，第一个和第二个细胞会改变它们的背景。所以我在第一个细胞上盘旋，第一个和第二个细胞改变背景。我在第二个细胞上盘旋，第一个和第二个细胞改变背景。我想一次突出两个单元格。谢谢，我确实很好地解释了我的问题。我不是:)用英语说好。

Answer 1

以下是在表格单元格上使用悬停的基本示例。

HTML：

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

CSS：

table {
    border: 1px solid #000;
    width:100%;
    text-align:center;
}

table tr:first-of-type td:nth-child(1):hover, table tr:first-of-type td:nth-child(1):hover + td:nth-child(2) {
    background: green;
}

table tr:first-of-type td:nth-child(1):hover, table tr:first-of-type td:nth-child(1):hover + td:nth-child(2) {
    background: green;
}

table tr:nth-of-type(2) td:nth-child(1):hover, table tr:nth-of-type(2) td:nth-child(1):hover ~ td:nth-child(3) {
    background: green;
}

演示： JSFiddle

如何突出显示（悬停）两个单元格以更改其背景

1 个答案: