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

@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?

@adelbucetta you would def need a more complex selector / css rule, or if it's too complex just handle it with js