There is a parent div with a child div inside it. I want the border color and text of the child div to turn white when a user hovers over the parent div.
For instance, in the example provided, the text inside the box that says No score, yet click and submit should change to white color along with the border color.
<div class="flex w-full p-4">
<div class="flex hover:bg-black hover:text-white text-black p-2 rounded cursor-pointer items-center w-full">
<div class="w-1/2">
<h4>🚻 RESTROOM</h4>
</div>
<div class="flex flex-wrap xs:w-full xs:mt-2 md:mt-0 w-1/2 py-4 border-black border-2 rounded relative">
<span class="flex items-center text-black text-xs font-bold uppercase h-full pin-t absolute ml-2">
No score yet, click and submit
</span>
</div>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>How can I achieve this effect? (I am using TailwindCss)