# HoverSyncElement

```ts
import { HoverSyncElement } from 'cx/ui';
```

`HoverSyncElement` is a container that participates in [HoverSync](./hover-sync) coordination. Use it to apply hover effects to custom elements like divs, cards, or SVG groups that don't have built-in hover sync support.

The component renders a `div` in HTML context or a `g` element in SVG context. When hovered (directly or via another element with the same `hoverId`), it applies the `cxs-hover` CSS state class along with any specified `hoverClass` and `hoverStyle`.

```tsx
import { Svg, Rectangle } from "cx/svg";
import { createModel } from "cx/data";
import { Repeater, Controller, HoverSync, HoverSyncElement } from "cx/ui";

interface DataItem {
  id: number;
  name: string;
  color: string;
  anchors: string;
}

interface Model {
  items: DataItem[];
  $record: DataItem;
}

const m = createModel<Model>();

class PageController extends Controller {
  onInit() {
    this.store.set(m.items, [
      { id: 0, name: "Red", color: "#ef4444", anchors: "0 0.5 0.5 0" },
      { id: 1, name: "Green", color: "#22c55e", anchors: "0 1 0.5 0.5" },
      { id: 2, name: "Blue", color: "#3b82f6", anchors: "0.5 0.5 1 0" },
      { id: 3, name: "Yellow", color: "#eab308", anchors: "0.5 1 1 0.5" },
    ]);
  }
}

export default (
  <div controller={PageController}>
    <HoverSync>
      <div class="flex gap-4 items-start">
        <div class="flex flex-col gap-2">
          <Repeater records={m.items} recordAlias={m.$record}>
            <HoverSyncElement
              hoverId={m.$record.id}
              class="px-4 py-2 border rounded cursor-pointer transition-all"
              style="background: white; border-color: #e5e7eb"
              hoverStyle="background: #f3f4f6; border-color: #9ca3af"
              hoverClass="shadow-md"
            >
              <span text={m.$record.name} />
            </HoverSyncElement>
          </Repeater>
        </div>

        <Svg style="width: 200px; height: 200px">
          <Repeater records={m.items} recordAlias={m.$record}>
            <HoverSyncElement
              hoverId={m.$record.id}
              style="--rect-opacity: 0.6"
              hoverStyle="--rect-opacity: 1"
            >
              <Rectangle
                anchors={m.$record.anchors}
                margin={3}
                style={{
                  fill: m.$record.color,
                  opacity: "var(--rect-opacity)",
                  transition: "opacity 0.15s",
                }}
              />
            </HoverSyncElement>
          </Repeater>
        </Svg>
      </div>
    </HoverSync>
  </div>
);

```

Hover over any item in the list or any rectangle to see synchronized highlighting.

## Configuration

| Property       | Type              | Default     | Description                                              |
| -------------- | ----------------- | ----------- | -------------------------------------------------------- |
| `hoverId`      | `string \| number`|             | Identifier for synchronized hover highlighting.          |
| `hoverChannel` | `string`          | `"default"` | Channel name for isolating multiple hover contexts.      |
| `hoverClass`   | `string`          |             | CSS class applied when the element is in hover state.    |
| `hoverStyle`   | `string \| object`|             | CSS styles applied when the element is in hover state.   |
| `class`        | `string`          |             | CSS class for the container element.                     |
| `style`        | `string \| object`|             | CSS styles for the container element.                    |