點擊後如何改變文字的顏色？

Question

我想要做的是改變按鈕背景的顏色，同時改變按鈕內部的文字顏色。 按鈕的顏色已經改變，但文字顏色沒有改變。 我嘗試將hover應用於文本，但只有在滑鼠觸摸文本時顏色才會改變。

<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">已發行</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 0127.075l-4.5-4.5a.75.75 0 01283.10183. a.75.75 0 011.05 -.143z"
                      clip-rule="evenodd"
                    />
              </svg>
            </span>
          </div>
           <p class="text-gray-500 mt-2">
               這份工作發布可以被任何擁有連結的人查看。
           </p>
     </button>
 </li>

所以我想要的是，一旦用戶觸摸按鈕，我想要改變按鈕內所有文字的顏色（即使用戶沒有觸控文字）

我該如何做呢？

Answer 1

使用group

#

 <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>

Answer 2

雷雷