How to change the color of text after click?

Question

What I want to do is change the color of the button's background and also change the color of the text inside the button. The button's color has changed, but the text color has not. I tried applying hover to the text, but the color only changes when the mouse touches the text. <liclass="text-gray-900cursor-pointerselect-nonep-4text-smmd:hover:red"id="listbox-option-0"ro

P粉550323338 · Answer

<p>Use <a href="https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state" rel="nofollow noreferrer">group</a></p>
<pre class="brush:html;toolbar:false;"> <li
     class="text-gray-900 cursor-pointer select-none p-4 text-sm group"
     id="listbox-option-0"
     role="option"
    >
    <button class="flex flex-col">
      <div class="flex justify-">
        <p class="font-normal group-hover:text-white">已发布</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">
               任何拥有链接的人都可以查看此职位发布信息。
           </p>
     </button>
 </li>
</pre>

P粉970736384 · Answer

button:hover p{
    color: red!important; // 更改你想要的颜色
}