Crosshair

.crosshair Class

Enable the crosshair feature by applying styles to the .crosshair class.

To style the highlighted rows and columns, use the .crosshair selector.

.crosshair {
  background-color: #456D7A;
  color: white;
}

To style the hovered cell, use the zg-cell.crosshair:hover selector.

zg-cell.crosshair:hover {
  background-color: #1C4E63;
}

To style the cells not highlighted, use the .hover :is(zg-cell, zg-head-cell) selector.

.hover :is(zg-cell, zg-head-cell):not(.crosshair) {
  opacity: .2;
}

Crosshair Grid:

Here is a complete grid that hightlights the row and column of the hovered cell: