---
title: "Crosshair | Features"
description: "ZingGrid has a built-in crosshair feature to highlight the row and column of the cell on hover."
url: https://www.zinggrid.com/docs/features/crosshair
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/features/crosshair.md
mode: provenance
representation: markdown
origin_response_id: c3be50a89727a51e0ab1c6f9b889b479
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.681Z
version_nonce: bddd3b545559e34ff2e8e88c9b5c9d46
generated_at_utc: 2026-11-08T23:36:17.394Z
response_nonce: d0a48439f464a302b211e7daed9ed73b
```

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

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

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

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

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

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

[Example code](https://app.zingsoft.com/demos/embed/KRKXMSKX)

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

* [Styling Basics Guide](https://www.zinggrid.com/docs/api/styling/usage)