正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

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

Adam Argyle

58,579 subscribers

34,609 次观看 • 1 年前 •via X (Twitter)

科学技术艺术教育 #CSS

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

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 👇👨‍💻

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 次观看 • 1 年前

Why CSS Hover Effects Matters!🥰

Why CSS Hover Effects Matters!🥰

F.O.L.A

22,713 次观看 • 9 个月前

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. ❤️

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 次观看 • 4 个月前

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

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

David Mráz

149,602 次观看 • 3 年前

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 ✨

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,769 次观看 • 1 年前

"glowy hover effect" by Ines

"glowy hover effect" by Ines

CodePen.IO

707,547 次观看 • 3 年前

"ASCII Glitch Ripple Hover Effect" by Bastou

"ASCII Glitch Ripple Hover Effect" by Bastou

CodePen.IO

12,295 次观看 • 9 个月前

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; }

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,127 次观看 • 10 个月前

Hover effects for personal website 🎈

Hover effects for personal website 🎈

Anne Lee

55,068 次观看 • 3 年前

Interesting glitch hover effect for icons →

Interesting glitch hover effect for icons →

Jim Raptis

22,826 次观看 • 1 年前

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! 👇

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,624 次观看 • 3 年前

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.

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

426,005 次观看 • 11 个月前

this effect can be achieved using only css by combining the :has() and :not() pseudo-classes: `.menu:has(.item:hover) .item:not(:hover) { filter: blur(8px); }` which simply means: when a menu has a hovered item, blur every item inside it that isn't being hovered

this effect can be achieved using only css by combining the :has() and :not() pseudo-classes: `.menu:has(.item:hover) .item:not(:hover) { filter: blur(8px); }` which simply means: when a menu has a hovered item, blur every item inside it that isn't being hovered

daniel petho

18,843 次观看 • 2 个月前

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

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

TESLA CARS ONLY⚡️

124,552 次观看 • 6 个月前

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 🥪

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 次观看 • 2 年前

"Interactive Table with Image Hover & Idle Animation" by Filip Zrnzevic

"Interactive Table with Image Hover & Idle Animation" by Filip Zrnzevic

CodePen.IO

15,103 次观看 • 1 年前

TESLA hover scooter will change the way people use personal transport. Who else wants this?

TESLA hover scooter will change the way people use personal transport. Who else wants this?

TESLA CARS ONLY⚡️

669,771 次观看 • 7 个月前