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

sad that i don't use these nearly as much as I should, since they are widely supported now eg this video is from my old-old portfolio where I was doing it with react because didn't know any better lol btw here is a wonderful writeup on how to use it joshwcomeau.com/css/has/

@nonzeroexitcode but the real question is what happens when you have nested menus with multiple hover states does this solution scale or do you need something more robust to handle complexity?

@nonzeroexitcode the css trick is cool,but i dont think i this design has a good user experence

I stopped being so `:𝚑𝚊𝚜()` happy, as fun as it is to use. The parent wastes effort deriving the same unchanged condition every time the descendent hover state changes. .𝚖𝚎𝚗𝚞:𝚑𝚘𝚟𝚎𝚛 > .𝚒𝚝𝚎𝚖:𝚗𝚘𝚝(:𝚑𝚘𝚟𝚎𝚛) { 𝚏𝚒𝚕𝚝𝚎𝚛: 𝚋𝚕𝚞𝚛(𝟾𝚙𝚡); } This flags from the parent and saves the subtree rescan. Lame, I know ... but in complicated or busy layouts, it really makes a difference.

@nonzeroexitcode Too disturbing? Imo they look much better when you don't blur them. You have a well balanced set of icons and type.

@nonzeroexitcode we used to do this before AI, but right now, nobody cares 🥲

@nonzeroexitcode This is absolutely incredible man thank you for sharing it !!

@nonzeroexitcode clean. the thing that makes or breaks it is transition: filter .25s on .item itself, not inside the :has rule. otherwise it blurs in smooth but snaps back the second you leave

@nonzeroexitcode Nicee :)

@nonzeroexitcode great Insights

H Daniel, thanks for sharing!! With Crodox we are trying to solve granular code isolation, e.g. as well CSS from the full codebase. We will soon release the template for it. In the meantime happy for you to have a look at our Crodox product and to hear your thoughts:)! crodox.com/en

@nonzeroexitcode It does focus on a particular content area users want to but at times user needs to have a focus but within context. But nice tip nevertheless