CSS change class inside a hover element

Question

I'm facing a problem with css about changing a class inside an hover element.

I have a simple table with a "text-success" class in a column, and also, I have an css on "tr:hover" to change the table row "background-color". The problem is the "text-success" is not well shown over the "background-color" hover, so I would like to chnage the color "text-success" only when the row is hovered. It is possible to do by CSS only?

Here the example

<div class="d-flex"> 
    <table style="width:100%;" class="table tablaDashboard">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Mark</th>
            </tr>
        </thead>
        <tbody>
            {% for user in users %}
                <tr>
                    <td> {{user['name']}} </td>
                    <td> {{user['age']}} </td>
                    <td class="text-success"> {{user['mark']}} </td>
                </tr>
            {% endfor %}
        </tbody>
    </table> 
</div>

<style>
.tablaDashboard tbody tr:hover { background:blue; }
.tablaDashboard tbody tr:hover .text-success{ color:OTHER-COLOR; } /*Doesn't work*/
.tablaDashboard tbody tr:hover > .text-success{ color:OTHER-COLOR; } /*Doesn't work*/
.tablaDashboard tbody tr:hover td .text-success{ color:OTHER-COLOR; } /*Doesn't work*/
.tablaDashboard tbody tr:hover td > .text-success{ color:OTHER-COLOR; } /*Doesn't work*/
</style>

Thanks a lot!!

Answer 1

I don't understund your code run with:

.tablaDashboard tbody tr:hover { background:blue; }
.tablaDashboard tbody tr:hover .text-success{ color:#ffffff; }

see it on CodePen: https://codepen.io/alexis-g/pen/OJMjPJq