Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

Focus By Demotion a use case for #CSS `:hover > :not(:hover)`

argyleink's profile picture

Adam Argyle

58,599 subscribers

34,575 görüntüleme • 1 yıl önce •via X (Twitter)

Bilim & TeknolojiSanatEğitim#CSS
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

An awesome CSS trick is to use :hover on the container and :not(:hover) on the items that are not currently hovered to make more advanced effects 👇👨‍💻
0:12

An awesome CSS trick is to use :hover on the container and :not(:hover) on the items that are not currently hovered to make more advanced effects 👇👨‍💻

David Mráz

16,879 görüntüleme • 1 yıl önce

little details: the intention of CSS :hover 👆 a::after { transition: scale 0.26s; } a:is(:hover, :focus-visible)::after { transition-delay: 0.125s; } add a small transition-delay so you don't trigger :hover events whilst passing over an element unintentionally
0:16

little details: the intention of CSS :hover 👆 a::after { transition: scale 0.26s; } a:is(:hover, :focus-visible)::after { transition-delay: 0.125s; } add a small transition-delay so you don't trigger :hover events whilst passing over an element unintentionally

jhey ʕ•ᴥ•ʔ

39,646 görüntüleme • 1 yıl önce

Why CSS Hover Effects Matters!🥰
0:16

Why CSS Hover Effects Matters!🥰

F.O.L.A

22,713 görüntüleme • 6 ay önce

Some hover states might be hurting your website's mobile experience. On mobile, hover states gets stuck when users tap on them. This CSS media query fixes that: @ media (hover: hover) { .card:hover { opacity: 0.5; } } With that, the hover transitions will only apply for devices that actually supports hovering. If you found this one useful, follow for more. ❤️
0:16

Some hover states might be hurting your website's mobile experience. On mobile, hover states gets stuck when users tap on them. This CSS media query fixes that: @ media (hover: hover) { .card:hover { opacity: 0.5; } } With that, the hover transitions will only apply for devices that actually supports hovering. If you found this one useful, follow for more. ❤️

Ali

26,692 görüntüleme • 1 ay önce

Cards Hover Effect woth pure CSS and HTML 🚀🔥 Code in the comments 🧑‍💻
0:11

Cards Hover Effect woth pure CSS and HTML 🚀🔥 Code in the comments 🧑‍💻

David Mráz

149,500 görüntüleme • 3 yıl önce

using CSS grid you can avoid width change in the parent container whilst making it responsive 🤙 the trick: update and transition the grid-template-columns for the list on :focus/:hover ✨
0:19

using CSS grid you can avoid width change in the parent container whilst making it responsive 🤙 the trick: update and transition the grid-template-columns for the list on :focus/:hover ✨

jhey ʕ•ᴥ•ʔ

270,594 görüntüleme • 1 yıl önce

"glowy hover effect" by Ines
0:12

"glowy hover effect" by Ines

CodePen.IO

707,403 görüntüleme • 2 yıl önce

"ASCII Glitch Ripple Hover Effect" by Bastou
0:12

"ASCII Glitch Ripple Hover Effect" by Bastou

CodePen.IO

12,220 görüntüleme • 6 ay önce

details 🤌 :hover intention + safety triangles 🦺 .triangle { pointer-events: none; } .toggle:hover .triangle { pointer-events: all; } .toggle:has(+ :popover-open) .triangle { scale: 0; } .toggle:is(:hover, :focus-visible) + aside { translate: 0 0; }
0:11

details 🤌 :hover intention + safety triangles 🦺 .triangle { pointer-events: none; } .toggle:hover .triangle { pointer-events: all; } .toggle:has(+ :popover-open) .triangle { scale: 0; } .toggle:is(:hover, :focus-visible) + aside { translate: 0 0; }

jhey ʕ•ᴥ•ʔ

136,100 görüntüleme • 8 ay önce

Hover effects for personal website 🎈
0:13

Hover effects for personal website 🎈

Anne Lee

54,771 görüntüleme • 3 yıl önce

Interesting glitch hover effect for icons →
0:11

Interesting glitch hover effect for icons →

Jim Raptis

22,826 görüntüleme • 10 ay önce

CSS Tip! ✨ Did you know you can animate CSS Grid tracks? 👀 ul:is(:hover,:focus-within) {--active: 1;} ul { grid-template-columns: auto repeat(3, calc(10px + (var(--active) * 100px))); transition: all 0.2s; } Adjust layouts based on interaction! 😎 CodePen.IO link below! 👇
0:18

CSS Tip! ✨ Did you know you can animate CSS Grid tracks? 👀 ul:is(:hover,:focus-within) {--active: 1;} ul { grid-template-columns: auto repeat(3, calc(10px + (var(--active) * 100px))); transition: all 0.2s; } Adjust layouts based on interaction! 😎 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

30,561 görüntüleme • 3 yıl önce

made only using css. no js listener used. took me longer than i thought it would. for hover state im doing `:has(*:is(.sidebar-icon-trigger:hover` so much you can do in css using pseudo classes. invest in css.
0:12

made only using css. no js listener used. took me longer than i thought it would. for hover state im doing `:has(*:is(.sidebar-icon-trigger:hover` so much you can do in css using pseudo classes. invest in css.

Soren

425,540 görüntüleme • 8 ay önce

HoveR McChicken
0:10

HoveR McChicken

Jeddzie

12,705 görüntüleme • 1 yıl önce

Link Mentions 🖇️ We've polished the hover states for link mentions and hyperlinks to introduce a sleek, polished experience. Hover over a link, and see a quick preview of what inside 🥪
0:13

Link Mentions 🖇️ We've polished the hover states for link mentions and hyperlinks to introduce a sleek, polished experience. Hover over a link, and see a quick preview of what inside 🥪

Notion

97,774 görüntüleme • 2 yıl önce

"Interactive Hover Spotlight with Smooth Follow Effect" by Sam García
0:11

"Interactive Hover Spotlight with Smooth Follow Effect" by Sam García

CodePen.IO

13,796 görüntüleme • 1 yıl önce

Hover Exploration №002
0:13

Hover Exploration №002

Matt Hall

36,934 görüntüleme • 9 ay önce

Magnetic hover reveal
0:11

Magnetic hover reveal

Raul

29,474 görüntüleme • 4 ay önce

TESLA hover scooter will change how we use personal transport. Who else needs this?
0:10

TESLA hover scooter will change how we use personal transport. Who else needs this?

TESLA CARS ONLY⚡️

124,329 görüntüleme • 4 ay önce