html - 特定条件下的 CSS 悬停效果（即包含文本）

Question

我希望我的 CSS 悬停样式仅在内部跨度（类“ag-header-group-text”）不为空（即显示文本）时发生。这只能通过css吗？

https://jsfiddle.net/N8qah/13/

<div class="ag-header-group-cell ag-header-group-cell-with-group" style="width: 80px;">
    <div class="ag-header-cell-resize"></div>
    <div class="ag-header-group-cell-label"><span class="ag-header-group-text">TEST</span><span class="ag-header-expand-icon"><svg width="10" height="10"><polygon points="0,0 10,5 0,10"></polygon></svg></span>
    </div>
</div>

更新：

我将我的 css 更改为 this 除非内部跨度不为空，否则它不会处于活动状态 - 唯一的问题是跨度被突出显示，而不是悬停发生的最外层

.ag-header-group-cell:hover  span.ag-header-group-text:not(:empty) {
    background-color: #00008A;
}

Answer 1

是的，有可能：

a:hover div.toshow:not(:empty) { display:block; }

看到它工作：

https://jsfiddle.net/N8qah/222/

查看有关:empty兼容性的更多详细信息：

https://developer.mozilla.org/es/docs/Web/CSS/%3Aempty

Answer 2

您可以针对任何子选择器，试试这个：

.ag-header-group-cell >*:hover {
     background-color: #00008A;
}