# Follow rows

Row hover highlights the row under the pointer to help users read wide tables. It differs from row selection and does not automatically select a row for business operations.

Canonical: https://grid.syidax.com/docs/features/row-hover/

<a id="understand"></a>

## How it works and when to use it

Use css-only for visual styling, stateful for row enter/leave events, or off for no highlighting. Avoid the cost of state updates when you do not need events.

In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.

- [Installation and integration · Shared sample data](https://grid.syidax.com/docs/guides/getting-started.md)

<a id="example-1"></a>

## Example 1. Lightweight visual highlighting

Choose a basic reading aid.

```javascript
grid.rowHover = 'css-only';
```

Verify the result: Only the row under the pointer changes appearance, without relying on app-level row hover event handling.

<a id="example-2"></a>

## Example 2. Connect row enter events

Use this when a supporting area in your app describes the row under the pointer.

```javascript
grid.rowHover = 'stateful';
grid.addEventListener('rowHoverChanged', event => console.log(event.detail));
```

Verify the result: Use the row information in the event. Build supporting descriptions from existing data instead of making a server request for every row.

<a id="example-3"></a>

## Example 3. Disable highlighting

In colorful analytical tables, remove hover highlighting while retaining selection and focus.

```javascript
grid.rowHover = 'off';
```

Verify the result: This reduces confusion when pointer movement would otherwise keep changing the appearance of row status colors or conditional formatting.

<a id="pitfalls"></a>

## Combining features and troubleshooting

Do not interpret hover as a click or selection event. Read bulk-operation targets from the actual selection API.

Touch screens have no persistent hover state. Essential information and controls must also be accessible through clicks and focus.

<a id="related-api"></a>

## APIs used by this feature

- [rowHover](https://grid.syidax.com/docs/options/rowHover.md) — Selects CSS-only hover highlighting, stateful hover with events, or no hover.
- [setHoveredRow](https://grid.syidax.com/docs/methods/setHoveredRow.md) — Sets the row targeted by stateful hover. Does not change actual row selection.
- [getHoveredRowId](https://grid.syidax.com/docs/methods/getHoveredRowId.md) — Reads the current hovered row ID or null.
- [rowHoverChanged](https://grid.syidax.com/docs/events/rowHoverChanged.md) — Emitted when the stateful hovered row changes. Unlike CSS-only hover, the app can read this state.

<a id="next"></a>

## Related reading

- [How rows, columns, and IDs relate](https://grid.syidax.com/docs/guides/concepts.md)
- [Connect results and events](https://grid.syidax.com/docs/guides/data-event-access.md)
- [Explore in Features](https://grid.syidax.com/grid/row-hover) — The guide describes which interactions are available to try.