角度UIグリッド：拡張可能な行にカーソルを移動

Question

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

私はこの解決法が嫌いです。まず第三者のコンポーネントにパッチを当てるのは嫌です。第2に、ホバーは遅く反応します。ホバーと色の変化の間には0.5秒かかります。

誰かがより良い解決策を持っている場合は、ここに投稿してください。