What im trying to do is to change the color of the background button, as well with that change the text color that is inside that button. The color of the button is changed, but the text color is not. I tried to put hover as well in the text, but the color changed when the mouse is touching the text.

   <li
     
     id="listbox-option-0"
     role="option"
    >
    <button >
      <div >
        <p >Published</p>
           <span >
                 <svg
                     
                     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 >
               This job posting can be viewed by anyone who has
               the link.
           </p>
     </button>
 </li>

So what I want to do is that as soon as the user touches the button, I want to change the all the text color that is inside of the button (even when the user doesn't touch the text)

How can I do it?

CodePudding user response：

button:hover p{
    color: red!important; // change the color you want
}