Home How to use tailwindcss to change the color of each element when hovering over descendant elements

Questions

How to use tailwindcss to change the color of each element when hovering over descendant elements

July 5, 2023

I want to change the text color when I hover each a tag, but the text color changes when I hover the ul tag.

I would like to know how the text color changes when I hover over each a tag.

<script src="https://cdn.tailwindcss.com"></script>

<ul class="flex gap-3 [&_a]:block [&_a]:text-blue-500 [&_a]:hover:text-red-500">
  <li><a href="https://www.example.com/">foo</a></li>
  <li><a href="https://www.example.com/">bar</a></li>
  <li><a href="https://www.example.com/">baz</a></li>
</ul>

<div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4 mt-10 mb-3">
  <p class="font-bold">Please</p>
  <p>I would like to use a method other than the one below.</p>
</div>
<ul class="flex gap-3 [&_a]:block [&_a]:text-blue-500">
  <li><a href="https://www.example.com/" class="hover:text-red-500">foo</a></li>
  <li><a href="https://www.example.com/" class="hover:text-red-500">bar</a></li>
  <li><a href="https://www.example.com/" class="hover:text-red-500">baz</a></li>
</ul>

>Solution :

Put :hover inside the arbitrary variant (replace [&_a]:hover:text-red-500 with [&_a:hover]:text-red-500).

<script src="https://cdn.tailwindcss.com"></script>
<ul class="flex gap-3 [&_a]:block [&_a]:text-blue-500 [&_a:hover]:text-red-500">
  <li><a href="https://www.example.com/">foo</a></li>
  <li><a href="https://www.example.com/">bar</a></li>
  <li><a href="https://www.example.com/">baz</a></li>
</ul>