CODEWITHSUNDEEP
htmlcsshover
Rod_Algonquin
Rod_Algonquin

Reputation: 26198

Change the number of color depends on which is hovered

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 in class prep-pizza, it will change the text color of a in prep-pizza and order-delivered.

And when I hovered on bake-pizza it will change the text color of a in prep-pizza and order-delivered and bake-pizza

and lastly when I hovered in out-for-deliver it will change the text color of a of all the td.

And by the way the check mark is only colored not the other characters.

How can I implement this kind of hovering where it will target multiple a from different class.

EDIT:

it will change color depending of the current location of which they currently hovering.

When I only hover order-delivered it will only change to the of the order-delivered.

Upvotes: 0

Views: 50

Answers (2)

jenriquer
jenriquer

Reputation: 166

Hope I understand what you want, this should do the trick

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

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

try it here http://jsfiddle.net/1n75v7y1/

Upvotes: 2

Chico3001
Chico3001

Reputation: 1963

Try this CSS, it can only change the current hover element... if you need to change another sibilings then you need to use javascript or 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;
}

Upvotes: 0

Related Questions