角度UI網格：將鼠標懸停在可擴展行上

Question

我正在嘗試在Angular ui網格的行上實現懸停效果。 當用戶將鼠標懸停在該行的任何位置時，整個行應更改其背景顏色。 但是，我使用的是可擴展網格，該網格會自動使用擴展圖標創建行標題。 現在，CSS規則為行標題區域或數據區域着色，但不會為整個行着色。

這是對行標題的懸停效果：

這是任何其他列上的懸停效果：

有人找到解決方案了嗎？

Answer 1

這是我所做的：

在表格的右側，我將以下內容添加到了單元格模板中：

<div class="ui-grid-cell-contents" 
     ng-class="{ 'ui-grid-cell-hover': (grid.appScope.hoverRow == row.uid) }"
     ng-mouseenter="grid.appScope.hoverRow = row.uid"
     ng-mouseleave="grid.appScope.hoverRow = undefined">

為了覆蓋左側部分，我更改了expandableRowHeader模板（在模板緩存中，因為它沒有在外部公開）：

<div class="ui-grid-row-header-cell ui-grid-expandable-buttons-cell">
    <div class="ui-grid-cell-contents"
         ng-class="{'ui-grid-cell-hover': (grid.appScope.hoverRow == row.uid)}"
         ng-mouseenter="grid.appScope.hoverRow = row.uid"
         ng-mouseleave="grid.appScope.hoverRow = undefined">
         ...
    </div>
</div>

我不喜歡這種解決方案。 首先，我不喜歡修補第三方組件。 其次，懸停反應緩慢：在懸停和顏色更改之間需要半秒鍾。

因此，如果有人有更好的解決方案，請在此處發布。