在某些情況下（即包含文本）CSS懸停效果

我希望我的CSS懸停樣式僅在內部跨度（類爲「ag-header-group-text」）不爲空（即顯示文本）時發生。這是可能的只通過CSS？在某些情況下（即包含文本）CSS懸停效果

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

UPDATE：

我改變了我的CSS這一點，但這並沒有啓用，除非內寬度不爲空，其中工作在 - 唯一的問題是跨度突出顯示，而不是最外層的懸停發生在

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

來源

2015-10-08 rex

您可以定位任何兒童選擇ORS，試試這個：

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

來源

2015-10-08 07:57:35 maioman

nope - 看起來像是殺死了所有懸停效果:) – rex

是這是可能的：

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

看到它的工作：

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

查看關於:empty和兼容性的詳細信息：

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

來源

2015-10-08 08:05:55

謝謝 - 這是更接近，但不是我所需要的。儘管我已經用你的建議更新了這個問題。 – rex

如果我理解你很好，你不能做到這一點，因爲用CSS你可以選擇父元素。但是，'：empty'只在完全清空元素時才起作用。空格，換行符等都是非空的。你需要javascript來查找元素，看看它是否是空的訪問父項。用CSS這是不可能的。 –

在某些情況下（即包含文本）CSS懸停效果

回答

相關問題