正在加载视频...
视频加载失败
sliding hover tip effect with CSS :has() and anchor positioning ✨ :root:has(li:nth-of-type(3):hover) { --i: 3; } .track { translate: 0 calc(var(--i) * -1lh); nav { anchor-name: --nav; } .tip { position-anchor: --nav; left: calc(anchor(right) + 1rem); }
164,666 次观看 • 1 年前 •via X (Twitter)
10 条评论

jhey ▲🐻🎈1 年前
here's the @CodePen for this one 🚀 updated it so you can explicitly define the flow of how the text slides 🤙

Arsyad1 年前
silky tooltip @silkysignon

ANOOP1 年前
Looks cool For the the Horizontal menu the text moving sideways would have looked super cool

Erik Rasmussen 👨💻🇺🇸🇪🇸1 年前
I assume this is okay for a11y, because "tooltips as divs" are ignored by screen readers, and the information is portrayed through other means?

jhey ▲🐻🎈1 年前
Yeah, for that reason [aria-hidden] on the tip itself and readable navigation links with a class to visually hide them but not from screen readers 🤙

Dheeraj Purohit धीरज पुरोहित ⭕❗⭕1 年前
@Sikandar_Bhide

Robin Stoytchev1 年前
Codepen posted? Really nice 🙌

Private WIFI1 年前
Wen book release

Brian1 年前
Instead of Pinball Wizard, you're a CSS Wizard

Ayan Patel1 年前
👏
