1

内側のスパン (クラス "ag-header-group-text" を使用) が空でない (つまり、テキストを表示している) 場合にのみ、CSS ホバー スタイルが発生するようにします。これは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をこれに変更しました。これは、内側のスパンが空でない限りアクティブにならないという点で機能します-唯一の問題は、ホバーが発生する最も外側のdivの代わりにスパンが強調表示されることです

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

2 に答える 2

2

はい可能です:

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-08T08:05:55.410 に答える
0

任意の子セレクターをターゲットにすることができます。これを試してください：

.ag-header-group-cell >*:hover {
     background-color: #00008A;
}
于 2015-10-08T07:57:35.593 に答える