CSS 在悬停元素内更改 class

Question

我遇到了 css 关于更改悬停元素内的 class 的问题。

我有一个简单的 table，在一个列中带有“text-success”class，而且，我在“tr:hover”上有一个 css 来更改table 行“背景色”。问题是“text-success”在“background-color”悬停时没有很好地显示，所以我只想在悬停该行时更改颜色“text-success”。只用 CSS 可以吗?

这里是例子

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

非常感谢！！

Answer 1

我不明白你的代码运行 :

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

在 CodePen 上查看： https://codepen.io/alexis-g/pen/OJMjPJq

CSS 在悬停元素内更改 class

CSS change class inside a hover element

css

hover