DEMO

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>

我想要的是当我将鼠标悬停在order-delivered时，复选标记会改变颜色。我已经尝试将悬停添加到a，但它只会在我只悬停到它时激活。

有没有办法悬停order-delivered而不更改i但只更改a的颜色？

Answer 1

选择器定位类:hover的{{1}}属性，然后定位其中order-delivered子项。

此选择器为a。

当.order-delivered:hover > a没有被悬停时，选择器td.order-delivered不返回任何元素。在悬停时，它返回第一个.order-delivered:hover，然后继续定位其唯一的锚子项。

Answer 2

试试这个：

.order-delivered:hover a.check-mark{
    color: #FFDD00;
}

<强>参考： CSS lighten child elements on parent mouseover

DEMO

Answer 3

Here是工作示例

只需添加一个CSS

.order-delivered:hover a{
    color: #FFDD00;
}

如何在悬停时更改表格行中特定文本的颜色

3 个答案:

DEMO