:hover > :not(:hover) in tailwind

A few days ago I stumbled across this post by Adam Argyle. While it’s not a new concept, I liked exploring the idea of highlighting individual elements by demoting other elements.

Like in the following example (try hovering the links):

It conveyed a sense of cleanliness I appreciate (and as Adam highlighted reduces cognitive load).

The problem: I’m using tailwind for my little corner of the internet.

I know, you either hate tailwind, or you love it.

I personally really like it and decided to explore if I could make it work.

Adams original code looks like this:

&:hover > *:not(:hover) {
  opacity: 0.25;
}

It’s very simple.

It selects all children that are not hovered within a hovered element and reduces their opacity.

Here is what I came up with:

<div class="group/list">
  <a
    href="/post-1"
    class="group-hover/list:[&:not(:hover)]:opacity-45"
  >
    Post #1
  </a>
<!-- More links go here -->
</div>

Like in Adam’s version I had to start from the children elements.

In my case these are anchor tags. In tailwind I don’t need to worry about selecting them, but only about styling them under certain conditions.

Tailwind doesn’t come with an easy way to style elements that are not hovered. This is not really a problem, I can just work around it using arbitrary variants to style elements that are not hovered: [&:not(:hover)]:opacity-45.

Half way there! I just need to figure out how to style based on the container being hovered

In this case I could use the group functionality. I decided to call my group “list”.

Yes, I’m very creative, when it comes to naming…

This way I can use the group pseudo selector to detect if the group was hovered: group-hover/list:

So I ended up with the full selector looking like group-hover/list:[&:not(:hover)]:opacity-45.