On the web you might come across a hover effect where the element you are hovering has full opacity and the sibling elements have a lower opacity. It could look something like this.
As you can see the second from the left item is at full opacity, while the others are faded.
How?... in Tailwind CSS
Thanks to the new hideous syntax where we can write stuff like
[&:hover>li] we can get this working quite easily, without any custom CSS 🎉
So what do we need?
- Parent element that on hover lowers the opacity of child elements
- Child elements that on hover override their opacity
Here's a simple version 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>
There's not much happening here but let's break it down.
ul is on hover target the
li elements and lower their opacity to
li element is on hover, force the opacity back to
1. We force it with the
! modifier which applies
That's the base for any hover effect like this with Tailwind CSS, now we can take that logic and apply it to a built out design.
One thing you'll notice, when hovering in the gaps between the
li elements that one of them will be on hover, this is to ensure an element is highlighted when the cursor is within the