Wie ändere ich die Textfarbe nach dem Klicken?

Question

Was ich tun möchte, ist die Farbe des Hintergrunds der Schaltfläche und auch die Farbe des Textes innerhalb der Schaltfläche zu ändern. Die Farbe der Schaltfläche hat sich geändert, die Textfarbe jedoch nicht. Ich habe versucht, den Mauszeiger auf den Text zu bewegen, aber die Farbe ändert sich nur, wenn die Maus den Text berührt.

<li
     class="text-gray-900 Cursor-Zeiger 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"
                   >
                   <Pfad
                      fill-rule="evenodd"
                      d = „7a.75.75 0 011.05 – .143z“
                      clip-rule="evenodd"
                    />
              </svg>
            </span>
          </div>
           <p class="text-gray-500 mt-2">
               Diese Stellenausschreibung kann von jedem über den Link eingesehen werden.
           </p>
     </button>
 </li>

Ich möchte also, sobald der Benutzer die Schaltfläche berührt, die Farbe des gesamten Textes innerhalb der Schaltfläche ändern (auch wenn der Benutzer den Text nicht berührt).

Was soll ich tun?

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

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