Change the text of button on hover-CodePudding

I want to change the text on the button on hovering

Button
    <div className={ status == "verified" ?  `${styles.btn1} ${styles.btn1Contact}` :  `${styles.btn} ${styles.btnContact}`} >
        <Button className={ status == "verified" ?  `${styles.btnremove}` :  `${styles.btnremove1}`}
        > {status} </Button>
        </div>

I am doing this way

 &:hover {
    background: white;
    content: 'Completed!';
    color: $fade-color;
  }

but nothing is changing

styles.btn:

.btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background-color: #4400aa !important;
  padding: 10px !important;
  height: 35px !important;
  width: 100px;
  min-width: 100px;
  color: white !important;
  border: 0px !important;
  border-radius: 8px !important;
  @media only screen and (max-width: $max-size-2) {
    margin-top: 10px;
  }
  &:hover {
    background: white;
    content: 'Completed!';
    color: $fade-color;
  }
  &:focus {
    background: white;
    color: $fade-color;
  }
  &Contact {
    & button,
    & button:focus {
      background-color: #4400aa;
    }
  }
}

styles.btn1:

.btn1 {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background-color: #e20f0f !important;
  padding: 10px !important;
  height: 35px !important;
  width: 100px;
  min-width: 100px;
  color: rgb(233, 24, 24) !important;
  border: 0px !important;
  border-radius: 8px !important;
  @media only screen and (max-width: $max-size-2) {
    margin-top: 10px;
  }

  &Contact {
    & button,
    & button:focus {
      background-color: rgb(233, 24, 24) !important;
    }
  }
}

styles.btnremove

.btnremove {
  border: 0px !important;
  border-radius: 8px !important;
  padding: 10px !important;
  height: 35px !important;
  width: 100px;
  background-color: rgb(233, 24, 24) !important;

  min-width: 100px;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

styles.btnremove1:

.btnremove1 {
  border: 0px !important;
  border-radius: 8px !important;
  padding: 10px !important;
  height: 35px !important;
  width: 100px;

  min-width: 100px;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

CodePudding user response：

Change content with CSS in :before (or :after). Hover works only in this order :hover:before

.btn:before {
  content:'Init value';
}
.btn:hover:before {
  content:'Hover value';
}

 <button ></button>

CodePudding user response：

Here is a JS solution for your problem

const Example = () => {
  const [isHovering, setHover] = useState(false);

  return (
    <Button
      className={
        status == "verified" ? `${styles.btnremove}` : `${styles.btnremove1}`
      }
      onm ouseEnter={() => setHover(true)}
      onm ouseLeave={() => setHover(false)}
    >
      {isHovering ? `Hovering` : `Not Hovering`}
    </Button>
  );
};

And here would be a CSS (SCSS) only solution

.btnremove,
.btnremove1 {
  // ... your styles

  .hover-content {
    display: none;
  }

  &:hover {
    .hover-content {
      display: initial;
    }

    .default-content {
      display: none;
    }
  }
}

const Example2 = () => {
  return (
    <Button
      className={
        status == "verified" ? `${styles.btnremove}` : `${styles.btnremove1}`
      }
    >
      <span className="hover-content">Hovering</span>
      <span className="default-content">Not Hovering</span>
    </Button>
  );
};

Both of these solutions are accessible.