<button popovertarget="parent">Toggle Parent</button>

<div popover id="parent">Parent</div>
<div popover anchor="parent" id="child">child</div>
const parent = document.getElementById('parent')
const child = document.getElementById('child')

parent.addEventListener('mouseenter', () => {
  // ポップオーバーが既に表示されている場合は何もしない
  if (child.matches(':popover-open')) return;
  child.showPopover();
});

parent.addEventListener('mouseleave', () => {
  // ポップオーバーが既に表示されていない場合は何もしない
  if (!child.matches(':popover-open')) return;
  child.hidePopover();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.