What im trying to do is to change the color of the background button, as well with that change the text color that is inside that button.
The color of the button is changed, but the text color is not.
I tried to put hover as well in the text, but the color changed when the mouse is touching the text.
<li
class="text-gray-900 cursor-pointer select-none p-4 text-sm md:hover:red"
id="listbox-option-0"
role="option"
>
<button class="flex flex-col">
<div class="flex justify-">
<p class="font-normal">Published</p>
<span class="text-black">
<svg
class="h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
clip-rule="evenodd"
/>
</svg>
</span>
</div>
<p class="text-gray-500 mt-2">
This job posting can be viewed by anyone who has
the link.
</p>
</button>
</li>
So what I want to do is that as soon as the user touches the button, I want to change the all the text color that is inside of the button (even when the user doesn’t touch the text)
How can I do it?
>Solution :
button:hover p{
color: red!important; // change the color you want
}