HoverSyncElement

import { HoverSyncElement } from 'cx/ui';

HoverSyncElement is a container that participates in HoverSync 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.

 <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> 
 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" },
    ]);
  }
} 
 interface DataItem {
  id: number;
  name: string;
  color: string;
  anchors: string;
}

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

const m = createModel<Model>(); 
 import { Svg, Rectangle } from "cx/svg";
import { createModel } from "cx/data";
import { Repeater, Controller, HoverSync, HoverSyncElement } from "cx/ui"; 

Red

Green

Blue

Yellow

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.