Here's the approach I took:
In order to enhance the right section of the table, I integrated the following code into the cell template:
<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">
To address the left side, I made adjustments to the expandableRowHeader template (which is stored in the template cache as it's not externally accessible):
<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>
I'm not entirely satisfied with this solution. For one, modifying a third-party component isn't ideal. Additionally, there's a noticeable delay in the hover responsiveness: the color change takes about half a second.
If anyone has a more effective solution, feel free to share it here.