Bagaimana untuk menukar warna teks selepas klik?

Question

Apa yang saya mahu lakukan ialah menukar warna latar belakang butang dan juga menukar warna teks di dalam butang. Warna butang telah berubah, tetapi warna teks tidak. Saya cuba menggunakan tuding pada teks, tetapi warna hanya berubah apabila tetikus menyentuh teks.

<li
     class="teks-kelabu-900 kursor-penuding pilih-tiada p-4 teks-sm md:hover:merah"
     id="listbox-option-0"
     peranan="pilihan"
    >
    <kelas butang="flex flex-col">
      <div class="flex justify-">
        <p class="font-normal">Diterbitkan</p>
           <span class="teks-hitam">
                 <svg
                     kelas="h-5 w-5"
                     xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 20 20"
                     fill="warna semasa"
                     aria-hidden="benar"
                   >
                   <laluan
                      fill-rule="evenodd"
                      d = "7a.75.75 0 011.05 -.143z"
                      clip-rule="evenodd"
                    />
              </svg>
            </span>
          </div>
           <p class="teks-kelabu-500 mt-2">
               Siaran kerja ini boleh dilihat oleh sesiapa sahaja yang mempunyai pautan.
           </p>
     </butang>
 </li>

Jadi apa yang saya mahukan ialah, sebaik sahaja pengguna menyentuh butang, saya mahu menukar warna semua teks di dalam butang (walaupun pengguna tidak menyentuh teks)

Apakah yang perlu saya lakukan?

Answer 1

Gunakan kumpulan

 <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; // 更改你想要的颜色
}