Apply style on parent when hovering over a specific child element using tailwind

Question

I have something like this:

<main id="parent" class="h-screen flex justify-center items-center">
  
  <div id="child" class="bg-red-200 w-96 h-72 flex">
  </div>
  
</main>

How would I go about applying .bg-blue-100 to the #parent only when hovering over #child?

(I understand that the opposite could be achieved using group on the parent, and group-hover on the child.)

Answer 1

You can give the parent pointer-events-none and the child pointer-events-auto then apply hover:bg-100 or whatever hover effect to the parent and it should only trigger when the child is hovered. Here's an example on Tailwind Play https://play.tailwindcss.com/W4C3J3tW6E

<main id="parent" class="h-screen flex justify-center items-center
hover:bg-blue-100 pointer-events-none">
  <div id="child" class="bg-red-200 w-96 h-72 flex pointer-events-auto">
  </div>
</main>

Answer 2

In case you also want to style the parent whenever the child is focused, just add

"focus-within:bg-indigo-500"

(Obviously replacing "bg-indigo-500" by your style)

This would work when it happens for every child or if you only have one tho.