experiment_id: web-retrieval-v1
fixture_id: /docs/features/crosshair
mode: provenance
representation: html
origin_response_id: 2a3117f8472133f23aadae7cad9531ed
version: 2026-10-22
version_created_at_utc: 2026-10-22T19:49:39.604Z
version_nonce: a9c810bb857c96a9795b3674014e8001
generated_at_utc: 2026-11-08T23:26:22.289Z
response_nonce: 88ad407bfe9b9fc8b815ce7fd47ab15e
Docs Version 1

Crosshair

The crosshair feature highlights the row and column up to the cell being hovered. To enable the feature, apply styles to the built-in .crosshair class.

.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:

Top

Related Resources

Here are some extra resources related to this feature to help with creating your grid:

[features: crosshair]