MenuBar hover

[alekseykurylev]

Hi! How do I make "Menubar.Trigger" open when I hover the cursor?

export function Menu() {
  const [value, setValue] = useState("");

  return (
    <Menubar.Root value={value} onValueChange={setValue}>
      <Menubar.Menu>
        <Menubar.Trigger onPointerEnter={() => setValue("Trigger1")}>
          Trigger1
        </Menubar.Trigger>
        <Menubar.Portal>
          <Menubar.Content>
            <Menubar.Item>Item</Menubar.Item>
            <Menubar.Item>Item</Menubar.Item>
            <Menubar.Sub>
              <Menubar.SubTrigger>SubTrigger</Menubar.SubTrigger>
              <Menubar.Portal>
                <Menubar.SubContent>
                  <Menubar.Item>Item</Menubar.Item>
                </Menubar.SubContent>
              </Menubar.Portal>
            </Menubar.Sub>
          </Menubar.Content>
        </Menubar.Portal>
      </Menubar.Menu>
      <Menubar.Menu>
        <Menubar.Trigger onPointerEnter={() => setValue("Trigger2")}>
          Trigger2
        </Menubar.Trigger>
        <Menubar.Portal>
          <Menubar.Content>
            <Menubar.Item>Item</Menubar.Item>
            <Menubar.Sub>
              <Menubar.SubTrigger>SubTrigger</Menubar.SubTrigger>
              <Menubar.Portal>
                <Menubar.SubContent>
                  <Menubar.Item>Item</Menubar.Item>
                  <Menubar.Arrow />
                </Menubar.SubContent>
              </Menubar.Portal>
            </Menubar.Sub>
            <Menubar.Separator />
            <Menubar.Item>1444</Menubar.Item>
          </Menubar.Content>
        </Menubar.Portal>
      </Menubar.Menu>
    </Menubar.Root>
  );
}