Question

我有这张桌子：

<table>
            <tr>
                <td class="order-delivered"><i>order</i><br/><i>delivered</i><br/>
                    <a class="check-mark">✔</a>
                </td>
                <td class="prep-pizza"><i>prep</i><br/><i>pizza</i><br/>
                    <a class="check-mark">✔</a>
                </td>
                <td class="bake-pizza"><i>bake</i><br/><i>pizza</i><br/>
                    <a class="check-mark">✔</a>
                </td>
                <td class="out-for-deliver"><i>out for</i><br/><i>delivery</i><br/>
                    <a class="check-mark">✔</a>
                </td>
            </tr>
        </table>

我想要的是，当我将其悬停在课程prep-pizza中时，它会更改a和prep-pizza中order-delivered的文字颜色。

当我在bake-pizza上徘徊时，它会更改a和prep-pizza以及order-delivered

中bake-pizza的文字颜色

最后当我在out-for-deliver中徘徊时，它会更改所有a的{{1}}的文字颜色。

顺便说一下，复选标记的颜色不是其他字符。

如何实现这种悬停，它会定位来自不同类的多个td。

编辑：

它将根据当前悬停的当前位置改变颜色。

当我只悬停a时，它只会更改为order-delivered。

Answer 1

希望我明白你的意思，这应该做的伎俩

tr:hover .check-mark,
td:hover .check-mark {
    color: blue;
}

td:hover ~ td .check-mark {
    color: black;
}

在这里试试http://jsfiddle.net/1n75v7y1/

Answer 2

尝试这个CSS，它只能更改当前的悬停元素...如果你需要更改另一个sibilings，那么你需要使用javascript或jquery

.order-delivered:hover{
background-color: red;
}
.prep-pizza:hover{
background-color: red;
}
.bake-pizza:hover{
background-color: red;
}
.out-for-deliver:hover{
background-color: red;
}

更改颜色的数量取决于悬停的颜色

2 个答案: