How to change color of specific text in table row on hover

Question

I have this table

         <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>

What I want is that when I hover to order-delivered the check mark would change color. Ive tried adding a hover to the a but it will only activate when I only hover to it.

Is there a way to hover the order-delivered without changing the color of i but only the a?

Answer 1

Try this:

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

Reference: CSS lighten child elements on parent mouseover

DEMO

Answer 2

A selector targeting the :hover attribute of the class order-delivered and then the a child of that works.

This selector would be .order-delivered:hover > a.

When the td.order-delivered is not being hovered on, the selector .order-delivered:hover returns no elements. On hover, it returns the first <td> and then proceeds to target its only anchor child.

Answer 3

Here is the working example

Just add a css

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