From 3a0afa918de4306f284b4e31818f4e8fa4919954 Mon Sep 17 00:00:00 2001 From: Scarriffle Date: Tue, 6 Oct 2026 21:03:30 +0200 Subject: [PATCH] Die Pfeile im Aufmacher warten, bis man hinzeigt MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Sie liegen über dem Bild und damit über allem, was dort steht. Bei einem einzeiligen Titel geht das gut. „Pirates of the Caribbean — Salazars Rache" bricht um, die erste Zeile rückt nach oben — und der linke Pfeil sitzt auf dem ersten Buchstaben. Ständig sichtbar ist er dort ein Fleck, auf Zuruf ein Knopf. Also erscheinen beide erst beim Überfahren des Aufmachers, in 150 ms, und verschwinden wieder. `hover: hover` ist dabei die ganze Vorsicht: auf einem Tablett gibt es kein Überfahren, und ein Knopf, der nur dabei erscheint, wäre dort schlicht nicht erreichbar. Dort bleibt alles, wie es war — unter 860 Bildpunkten gibt es die Pfeile ohnehin nicht, da wird gewischt. Gemessen: in Ruhe Deckung 0, kein Zeigerziel. Zeiger über dem Aufmacher: 0,72 und anklickbar. Zeiger auf dem Pfeil: 1, dunklerer Grund, und der Klick blättert tatsächlich weiter (Tastatur-Tabulator vom Knopf „Mehr" aus: Deckung 1, `:focus-visible` greift, Umriss 2 px) — `pointer-events: none` hält nur den Zeiger ab, nicht den Fokus. Co-Authored-By: Claude Opus 5 --- web/app/src/style.css | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/web/app/src/style.css b/web/app/src/style.css index e67a973..3743aa9 100644 --- a/web/app/src/style.css +++ b/web/app/src/style.css @@ -1233,6 +1233,27 @@ body:has(.pl.pl-klein) .auswahlleiste { bottom: 92px; } .hero-pfeil-links { left: var(--s-regular); } .hero-pfeil-rechts { right: var(--s-regular); } +/* **Erst beim Überfahren, und nur wo es ein Überfahren gibt.** + * + * Der Pfeil liegt über dem Bild und damit über allem, was dort steht. Bei + * einem einzeiligen Titel geht das gut; bei „Pirates of the Caribbean — + * Salazars Rache" bricht die Zeile um, die zweite rutscht nach unten, und + * der linke Pfeil sitzt auf dem ersten Buchstaben. Ständig sichtbar ist er + * dort ein Fleck, auf Zuruf ist er ein Knopf. + * + * `hover: hover` ist dabei die ganze Vorsicht: auf einem Tablett gibt es + * kein Überfahren, und ein Knopf, der nur beim Überfahren erscheint, wäre + * dort schlicht nicht erreichbar. Dort bleibt alles, wie es war. + * + * Mit der Tastatur erscheint er ebenfalls — `pointer-events: none` hält nur + * den Zeiger ab, nicht den Fokus. */ +@media (hover: hover) { + .hero-pfeil { opacity: 0; pointer-events: none; } + .hero:hover .hero-pfeil { opacity: .72; pointer-events: auto; } + .hero:hover .hero-pfeil:hover { opacity: 1; background: rgba(11, 11, 13, .8); } + .hero-pfeil:focus-visible { opacity: 1; pointer-events: auto; } +} + .hero-punkte { position: absolute; right: var(--s-page); bottom: calc(var(--s-page) - 12px); display: flex; gap: 6px;