how to add border to a hovered cell in ag-grid angular?

Question

How to highlight or add border to a cell on hover in ag-grid angular

       <ag-grid-angular
       #agGrid
       style="width: 100%; height: 100%; margin-top: 31px"
       id="myGrid"
       [columnDefs]="columnDefs"
       [defaultColDef]="defaultColDef"
       [components]="components"
       [suppressRowTransform]="true"
       [rowData]="rowData"
       [rowHeight]="rowHeight"
       [headerHeight]="headerHeight"
       [gridOptions]="gridOptions"
       (cellClicked)="onCellClicked($event)"
       (cellMouseOver)="cellMouseOver($event)"
       (gridReady)="onGridReady($event)">
       </ag-grid-angular>
   </div>

Answer 1

use this css code -

.ag-body-viewport .ag-row-hover .ag-column-hover {
    border: 1px solid red !important;
}