How to Create a Highlight Hover Effect with Tailwind CSS

You may have seen a hover effect on the web where the element you're hovering over remains fully opaque, while its sibling elements become less opaque. Here's what it might look like:

Creating this effect in Tailwind CSS

With the new syntax that allows us to write expressions like [&:hover>li], we can easily achieve this effect without any custom CSS 🎉

So, what do we need?

1. A parent element that reduces the opacity of its child elements when hovered over.
2. Child elements that revert their opacity when hovered over.

Here's a simple implementation of that:

<ul class="[&:hover>li]:opacity-50">
  <li class="hover:!opacity-100">...</li>
  <li class="hover:!opacity-100">...</li>
  <li class="hover:!opacity-100">...</li>
  <li class="hover:!opacity-100">...</li>
</li>

Let's break down what's happening here:

[&:hover>li]:opacity-50

When you hover over the ul, it targets the li elements and reduces their opacity to 0.5.

hover:!opacity-100

When you hover over an li element, it forces its opacity back to 1. The ! modifier applies !important to enforce this.

This is the basic structure of any hover effect like this in Tailwind CSS. You can take this logic and apply it to a more complex design.

One thing you might notice is that when you hover between the li elements, one of them will still be highlighted. This is to ensure that an element is highlighted whenever the cursor is within the ul.

To get around this, you can use JavaScript and a package like Negative Hover that I wrote.