WebCraft

Home / Elements / hover

:has() + :not()

Hovering one row quiets the others

build.ymldeploy.ymlrollback.ymlaudit.yml

CaveatThis re-evaluates on every pointer move across the list. On a few dozen rows it is free; on a table of several hundred it is a visible frame cost, and the fix is to move the rule to the row rather than the list.

FallbackGuard it with @media (hover: hover). On touch the hover state latches after a tap and leaves every other row dimmed with nothing hovered.

CSS 
@media (hover: hover) {
  /* only while something is hovered */
  .list:has(a:hover) a:not(:hover) {
    opacity: .35;
  }
}

Published

Questions

<details name>

How do I fade sibling items on hover without :has()?

Use .list:hover a:not(:hover) { opacity: .35 }. It works everywhere, with one flaw: hovering the gap between items still counts as hovering the list, so everything dims with nothing highlighted. The :has(a:hover) version only fires when a link is under the pointer.

Why do the other items stay dimmed after tapping on mobile?

Touch browsers keep :hover on the last tapped element until you tap somewhere else, so the dimmed state sticks. Wrap the rule in @media (hover: hover) and touch devices never get it.

How do I dim the other rows when a link gets keyboard focus?

Add a second rule with :focus-visible: .list:has(a:focus-visible) a:not(:focus-visible). Keep it outside the @media (hover: hover) block, since keyboard users on touch devices have no hover.

Also tagged hover