{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "hover-absicht-timing",
 "name": "Hover-Absicht und Zeitlogik",
 "name_en": "Hover intent / hover delay / skip delay",
 "kurz": "Mega-Menü, Tooltip und Pfeil reagieren erst auf echtes Verweilen, schließen mit kurzem Nachlauf und wechseln bei offenem Menü ohne neue Wartezeit.",
 "kategorie": "Hover",
 "kategorie_slug": "hover",
 "kategorie_nr": 7,
 "bau_chat": "C4",
 "prioritaet": "B",
 "trendstatus": "aufsteigend",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "ruhig",
  "präzise"
 ],
 "stimmung_roh": [
  "ruhig",
  "präzise"
 ],
 "technik": [
  "css",
  "vanilla-js",
  "interest-invokers"
 ],
 "technik_gruppen": [
  "css",
  "js"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Drei Zeitregeln für Hover-Effekte mit großer Wirkung wie Mega-Menü, Bildvorschau oder Hovercard. 1) Absicht: Der Effekt startet erst nach kurzem Verweilen (30–250 ms). Wer nur über ein Raster oder eine Navigation streift, löst nichts aus. 2) Nachlauf: Beim Verlassen bleibt das Element 100–300 ms offen. So erreicht der Zeiger das geöffnete Menü, auch wenn er kurz eine Lücke überquert. 3) Skip-Delay: Ist schon ein Element offen, öffnet der Nachbar sofort. Das Wandern durch eine Navigation bleibt flüssig.",
  "warum_es_wirkt": "Die Seite reagiert auf Absicht statt auf jede Bewegung. Nichts flackert beim Drüberstreifen, nichts klappt weg, während man hineinfährt. Das bemerkt kaum jemand bewusst, aber die Seite wirkt ruhig und durchdacht statt nervös. Genau das unterscheidet handwerklich gute von bloß animierten Seiten.",
  "wann_einsetzen": "Bei allen Hover-Effekten, die Layout überlagern oder Medien laden: Mega-Menüs, Vorschaukarten, Hovercards, Tooltips, Raster mit Bild-Reveal.",
  "wann_nicht": "Bei kleinem Feedback wie Farbwechsel, Hintergrundfläche oder Unterstreichung. Dort sofort reagieren, sonst wirkt die Seite träge. Auch nicht bei Klick-Menüs.",
  "varianten": [
   "Fester Timer mit Skip-Delay: 100 ms rein, 150 ms Nachlauf, 0 ms beim Nachbarn (diese Demo)",
   "Hover-Intent über die Geschwindigkeit: öffnet erst, wenn der Zeiger abbremst (in der Demo umschaltbar)",
   "Reines CSS mit transition-delay nur im :hover-Zustand, raus ohne Verzögerung (Stripe, PostHog, 14islands)",
   "Kurzer Timer gegen Streif-Bewegungen über ein Bildraster, etwa 30 ms (Codrops HoverGrid)",
   "Nativ mit Interest Invokers: interest-delay, Standard 0,5 s rein und raus, anpassbar z. B. auf 0.2s 0.1s; Skip-Delay über :root:has(:interest-source)"
  ],
  "umsetzung": "JS: Beim pointerenter einen Timer starten: setTimeout(open, anyOpen ? 0 : 100). Beim pointerleave den Timer löschen und das Schließen planen: closeT = setTimeout(close, 150). Das geöffnete Menü löscht closeT bei pointerenter und plant es bei pointerleave neu. Ein Panel für alle Menüpunkte, dessen Inhalt beim Skip-Delay wechselt; so bleibt der Rahmen stehen und nur Höhe und Inhalt gleiten.\n\nCSS: In Produktion lösen viele Seiten das mit transition-delay, das nur im Hover-Zustand gilt: .tip { transition: opacity .15s } .btn:hover .tip { transition-delay: .25s }. Hinein mit Verzögerung, hinaus sofort.\n\nNativ: [interestfor] { interest-delay: .2s .1s } und :root:has(:interest-source) [interestfor] { interest-delay-start: 0s }.\n\nFallstricke: Fokus darf nicht warten. Ein Klick auf den Auslöser darf ein gerade per Hover geöffnetes Menü nicht sofort wieder schließen. Kleines Feedback wie die Hintergrundfläche des Menüpunkts immer sofort zeigen, nur den großen Effekt verzögern.",
  "mobil": "Auf Touch gibt es kein Hover. Tippen öffnet sofort, ohne Verzögerung und ohne Nachlauf. Zweites Tippen oder Tippen daneben schließt.",
  "reduzierte_bewegung": "Die Zeitlogik bleibt sinnvoll und unverändert. Nur die Animation des geöffneten Elements wird zur kurzen Überblendung.",
  "barrierefreiheit": "Tastaturfokus öffnet ohne Verzögerung. Escape schließt und gibt den Fokus an den Auslöser zurück. aria-expanded am Auslöser, Tooltip mit role=tooltip und aria-describedby. Inhalte, die per Hover erscheinen, müssen sich schließen lassen, mit dem Zeiger erreichbar sein und stehen bleiben (WCAG 1.4.13)."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "30 (HoverGrid); 500 Standard-interest-delay; Beispiel 200 ein / 100 aus; 100 (Stripe-Menü); 250 (PostHog-Tooltip); 200 (14islands-Pfeil)",
  "stagger_ms": "",
  "distanz": "",
  "sonstiges": "",
  "herkunft": "beobachtet",
  "quelle": "https://github.com/codrops/HoverGrid ; https://developer.chrome.com/docs/modern-web-guidance/guides/ui-components/hovercard; https://stripe.com/ ; https://posthog.com/ ; https://www.14islands.com/"
 },
 "kurve": null,
 "gesehen_bei": [
  {
   "seite": "Codrops HoverGrid (Repo)",
   "url": "https://github.com/codrops/HoverGrid",
   "auszeichnung": "",
   "beobachtung": "Code: hoverTimer = setTimeout(showWork, 30) – ‚Delay the hover effect for 30ms‘, Abbruch bei mouseleave.",
   "art": "demo"
  },
  {
   "seite": "Chrome Developers: Hovercard",
   "url": "https://developer.chrome.com/docs/modern-web-guidance/guides/ui-components/hovercard",
   "auszeichnung": "",
   "beobachtung": "interest-delay als CSS-Eigenschaft, Standard 0.5 s; Skip-Delay-Muster mit :interest-source.",
   "art": "artikel"
  },
  {
   "seite": "Stripe",
   "url": "https://stripe.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (Bundle e4746273d30fe790.css): .hds-navigation-menu:not(--open):hover setzt --navigation-menu-transition-delay:0.1s und eine Reset-Animation navigation-menu-delay-reset 0s linear .1s – das Mega-Menü öffnet erst nach 100 ms Verweilen; Pfeil-Icon erscheint mit animation nav-hover-arrow-in .3s.",
   "art": "website"
  },
  {
   "seite": "PostHog",
   "url": "https://posthog.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (Inline-CSS): .vac-tool-rail button:hover .vac-tool-tip – Tooltip mit transition-delay .25s (Verweilabsicht), sofortiges Ausblenden über .hover:delay-0.",
   "art": "website"
  },
  {
   "seite": "14islands",
   "url": "https://www.14islands.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (f2973826e8215c7b.css): .Link_link:hover .Link_arrow rect/path mit transition-delay .2s – Pfeil-Animation startet erst nach 200 ms Hover.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Chrome: Hovercard",
   "url": "https://developer.chrome.com/docs/modern-web-guidance/guides/ui-components/hovercard"
  }
 ],
 "kombinierbar_mit": [
  "hovercard-interest-invoker",
  "listen-hover-bildvorschau",
  "bild-zoom-in-maske"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/hover/hover-absicht-timing/",
  "meta": "https://cecodesign.de/lab/fundus/hover/hover-absicht-timing/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/hover/hover-absicht-timing/demo"
 },
 "herkunft": {
  "quelldateien": [
   "hover.json",
   "r3-belege-b.json"
  ],
  "pruefnotizen": [
   "r3-belege-b.json (Runde 3, 31.10.2026): Hover-Verzögerungen in Produktion per CSS transition-delay gelöst, nicht per JS-Timer."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Mega-Menü, Tooltip und Pfeil reagieren erst auf echtes Verweilen, schließen mit kurzem Nachlauf und wechseln bei offenem Menü ohne neue Wartezeit.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "absicht_ms": "100 bis zum Öffnen des Mega-Menüs (Stripe, gemessen)",
   "nachlauf_ms": "150 bis zum Schließen nach Verlassen von Auslöser oder Menü (Wert aus der Umsetzung im Steckbrief)",
   "skip_delay_ms": "0, sobald bereits ein Menü offen ist",
   "tooltip_ms": "250 rein, 0 raus (PostHog, gemessen)",
   "pfeil_ms": "200 transition-delay nur beim Hineingehen, raus sofort (14islands, gemessen)",
   "tempo_variante": "Abtastung alle 50 ms, öffnet bei weniger als 5 px Bewegung je Abtastung (rund 100 px/s); eigener Wert, nicht gemessen",
   "sofort_feedback": "Fläche und Farbe des Auslösers ohne Verzögerung; nur die Absichtslinie füllt sich linear in 100 ms",
   "menue_auf": "opacity, translateY −8 px → 0, scale 0,985 → 1 in 320 ms cubic-bezier(0.16, 1, 0.3, 1)",
   "menue_zu": "160 ms cubic-bezier(0.4, 0, 0.2, 1)",
   "menue_wechsel": "Höhe 320 ms expo.out, Inhalt ±24 px in Laufrichtung, Überblendung 200 ms linear",
   "feder_klein": "cubic-bezier(0.34, 1.56, 0.64, 1) 350 ms für Karten (−3 px), Button (scale 1,04), Tooltip und Pfeil (6 px)",
   "luecke": "8 px zwischen Kopfzeile und Menü, rund 25 px zwischen Auslöser und Menü"
  },
  "ausloeser": "hover",
  "touch": "Keine Verzögerung: Tippen öffnet das Menü sofort, zweites Tippen oder Tippen daneben schließt. Der Tooltip öffnet per Tippen. Der Messstreifen und der Variantenschalter sind ausgeblendet, ein Hinweis erklärt das Verhalten.",
  "reduziert": "Die Zeitlogik bleibt unverändert. Menü und Tooltip blenden nur in 150 ms über, ohne Versatz, Skalierung oder Feder. Der laufende Messstreifen ist ausgeblendet, die Statuszeile meldet weiter jedes Ereignis.",
  "korrekturen": {
   "beschreibung": "Drei Zeitregeln für Hover-Effekte mit großer Wirkung wie Mega-Menü, Bildvorschau oder Hovercard. 1) Absicht: Der Effekt startet erst nach kurzem Verweilen (30–250 ms). Wer nur über ein Raster oder eine Navigation streift, löst nichts aus. 2) Nachlauf: Beim Verlassen bleibt das Element 100–300 ms offen. So erreicht der Zeiger das geöffnete Menü, auch wenn er kurz eine Lücke überquert. 3) Skip-Delay: Ist schon ein Element offen, öffnet der Nachbar sofort. Das Wandern durch eine Navigation bleibt flüssig.",
   "warum_es_wirkt": "Die Seite reagiert auf Absicht statt auf jede Bewegung. Nichts flackert beim Drüberstreifen, nichts klappt weg, während man hineinfährt. Das bemerkt kaum jemand bewusst, aber die Seite wirkt ruhig und durchdacht statt nervös. Genau das unterscheidet handwerklich gute von bloß animierten Seiten.",
   "wann_einsetzen": "Bei allen Hover-Effekten, die Layout überlagern oder Medien laden: Mega-Menüs, Vorschaukarten, Hovercards, Tooltips, Raster mit Bild-Reveal.",
   "wann_nicht": "Bei kleinem Feedback wie Farbwechsel, Hintergrundfläche oder Unterstreichung. Dort sofort reagieren, sonst wirkt die Seite träge. Auch nicht bei Klick-Menüs.",
   "varianten": [
    "Fester Timer mit Skip-Delay: 100 ms rein, 150 ms Nachlauf, 0 ms beim Nachbarn (diese Demo)",
    "Hover-Intent über die Geschwindigkeit: öffnet erst, wenn der Zeiger abbremst (in der Demo umschaltbar)",
    "Reines CSS mit transition-delay nur im :hover-Zustand, raus ohne Verzögerung (Stripe, PostHog, 14islands)",
    "Kurzer Timer gegen Streif-Bewegungen über ein Bildraster, etwa 30 ms (Codrops HoverGrid)",
    "Nativ mit Interest Invokers: interest-delay, Standard 0,5 s rein und raus, anpassbar z. B. auf 0.2s 0.1s; Skip-Delay über :root:has(:interest-source)"
   ],
   "umsetzung": "JS: Beim pointerenter einen Timer starten: setTimeout(open, anyOpen ? 0 : 100). Beim pointerleave den Timer löschen und das Schließen planen: closeT = setTimeout(close, 150). Das geöffnete Menü löscht closeT bei pointerenter und plant es bei pointerleave neu. Ein Panel für alle Menüpunkte, dessen Inhalt beim Skip-Delay wechselt; so bleibt der Rahmen stehen und nur Höhe und Inhalt gleiten.\n\nCSS: In Produktion lösen viele Seiten das mit transition-delay, das nur im Hover-Zustand gilt: .tip { transition: opacity .15s } .btn:hover .tip { transition-delay: .25s }. Hinein mit Verzögerung, hinaus sofort.\n\nNativ: [interestfor] { interest-delay: .2s .1s } und :root:has(:interest-source) [interestfor] { interest-delay-start: 0s }.\n\nFallstricke: Fokus darf nicht warten. Ein Klick auf den Auslöser darf ein gerade per Hover geöffnetes Menü nicht sofort wieder schließen. Kleines Feedback wie die Hintergrundfläche des Menüpunkts immer sofort zeigen, nur den großen Effekt verzögern.",
   "mobil": "Auf Touch gibt es kein Hover. Tippen öffnet sofort, ohne Verzögerung und ohne Nachlauf. Zweites Tippen oder Tippen daneben schließt.",
   "reduzierte_bewegung": "Die Zeitlogik bleibt sinnvoll und unverändert. Nur die Animation des geöffneten Elements wird zur kurzen Überblendung.",
   "barrierefreiheit": "Tastaturfokus öffnet ohne Verzögerung. Escape schließt und gibt den Fokus an den Auslöser zurück. aria-expanded am Auslöser, Tooltip mit role=tooltip und aria-describedby. Inhalte, die per Hover erscheinen, müssen sich schließen lassen, mit dem Zeiger erreichbar sein und stehen bleiben (WCAG 1.4.13)."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept fahrschule-freundlich-buchbar mit der erfundenen Fahrschule Schänzle aus Konstanz (Bricolage Grotesque, Atkinson Hyperlegible Next, Creme/Navy/Kennzeichen-Gelb, gezeichnete Straße als eigenes SVG). Die Navigation mit Mega-Menü ist für eine Fahrschule der natürliche Ort für Hover-Absicht. Die Demo zeigt alle drei Regeln an einer Seite: Menü (100/150/0 ms), Tooltip am Grundbetrag (250/0 ms) und Pfeil-Link (200 ms). Ein Fahrtenschreiber unten zeichnet Zeiger, Wartezeit, Nachlauf und Skip-Delay live als Streifen auf und macht die unsichtbare Logik sichtbar. Varianten: Timer + Skip, Tempo (Hover-Intent über Geschwindigkeit), Ohne (zum Vergleich mit Flackern). Die Vorführung fährt mit gedachtem Zeiger eine feste Route (Drüberstreifen, Verweilen, schräg durch die Lücke ins Menü, Skip zu den Nachbarn, Tooltip, Pfeil) und wechselt je Runde die Variante. Eine echte Mausbewegung beendet die Vorführung. Die Zeiger-Logik verarbeitet Maus und gedachten Zeiger über dieselbe Funktion (elementFromPoint). AD-Review 01.11.2026: Note 4. Zugang 02.11.2026: Bei ≤ 360 px Hauptnavigation enger (Polster 9/7 px, 14,5 px), kein Querscrollen; Knopf-Rahmen im Kontrastmodus."
 }
}