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

我不喜欢这种解决方案。 首先，我不喜欢修补第三方组件。 其次，悬停反应缓慢：在悬停和颜色更改之间需要半秒钟。

因此，如果有人有更好的解决方案，请在此处发布。