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

Posted 2023-03-28

【中文标题】特定条件下的 CSS 悬停效果（即包含文本）

【英文标题】：CSS hover effect on certain condition (ie contains text)

【发布时间】：2016-01-05 17:15:07

【问题描述】：

我希望我的 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  ><polygon points="0,0 10,5 0,10"></polygon></svg></span>
    </div>
</div>

更新：

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

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

【参考方案1】：

你可以定位任何子选择器，试试这个：

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

【讨论】：

不 - 似乎这杀死了所有悬停效果:)

【参考方案2】：

是的，有可能：

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

看看它的工作原理：

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

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

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

【讨论】：

谢谢 - 这更接近但不完全是我需要的。不过，我已经根据您的建议更新了问题。

如果我理解你很好，你不能做到，因为使用 CSS 你可以选择父元素。但是，:empty 仅在元素完全为空时才有效。空格、换行符等作为非空的。您需要 javascript 来查找元素，查看它是否为空访问父元素。使用 css 是不可能的。