Comment changer la couleur du texte après clic ?

Question

Ce que je veux faire, c'est changer la couleur de l'arrière-plan du bouton et également changer la couleur du texte à l'intérieur du bouton. La couleur du bouton a changé, mais pas la couleur du texte. J'ai essayé d'appliquer le survol au texte, mais la couleur ne change que lorsque la souris touche le texte.

<li
     class = "text-gray-900 curseur-pointeur select-none p-4 text-sm md:hover:red"
     id="listbox-option-0"
     role="option"
    >
    <classe de bouton="flex flex-col">
      <div class="flex justifier-">
        <p class="font-normal">Publié</p>
           <span class="text-black">
                 <svg
                     classe = "h-5 w-5"
                     xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 20 20"
                     fill="CouleurActuelle"
                     aria-hidden = "vrai"
                   >
                   <chemin
                      fill-rule = "même impair"
                      d = " 7a.75,75 0 011,05 -.143z"
                      clip-rule = "même impair"
                    />
              </svg>
            </envergure>
          </div>
           <p class="text-gray-500 mt-2">
               Cette offre d’emploi peut être consultée par toute personne disposant du lien.
           </p>
     </bouton>
 </li>

Donc, ce que je veux, c'est qu'une fois que l'utilisateur touche le bouton, je souhaite changer la couleur de tout le texte à l'intérieur du bouton (même si l'utilisateur ne touche pas le texte)

Que dois-je faire ?

Answer 1

Utilisez groupe

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