v135 · dom
Nav preview cards
Hover or focus any nav link to see a rich preview card for that section — powered entirely by interestfor. No JavaScript hover listeners, no mouseenter/mouseleave wiring — the browser fires interest/loseinterest events and handles pointer/keyboard/long-press uniformly.
interestfor: checking…
Before: manual hover listeners
mouseenter/mouseleave per link. No keyboard support unless you also add focus/blur. No long-press. Race conditions between hover and popover hover. Accessibility requires aria-describedby wiring.
After: interestfor
One
interestfor attribute per link. The browser fires interest for hover, focus, and long-press, and loseinterest with a grace window. The popover top-layer stacking is managed automatically.
Interest events
Hover or focus a nav link to see events…
<!-- HTML: one attribute per link, no JS needed -->
<a href="/apis" interestfor="preview-apis">APIs</a>
<a href="/guides" interestfor="preview-guides">Guides</a>
<div id="preview-apis" popover="hint">
<!-- rich preview card -->
</div>
<!-- JS: optional — only if you want analytics/positioning -->
document.querySelectorAll('[interestfor]').forEach(link => {
link.addEventListener('interest', e => {
// position popover below the link (anchor positioning is even cleaner)
const popover = document.getElementById(link.getAttribute('interestfor'));
const rect = link.getBoundingClientRect();
popover.style.top = (rect.bottom + 8) + 'px';
popover.style.left = rect.left + 'px';
logEvent('interest', link.textContent.trim());
});
});