CODEWITHSUNDEEP
javascriptcssreactjs
James_sheford
James_sheford

Reputation: 303

Change the text of button on hover

I want to change the text on the button on hovering on the react button from antd design I want to change the text on the button on hovering on the react button from antd design

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 {
   
  }

but nothing is changing

styles.btn:

.btn {
  display: flex !important;

 
 {
    margin-top: 10px;
  }
  &:hover {
  
    color: $fade-color;
  }
  &:focus {
  
    color: $fade-color;
  }
 
  }
}

styles.btn1:

.btn1 {
 
  @media only screen and (max-width: $max-size-2) {
    margin-top: 10px;
  }

 
  }
}

styles.btn1

.btnremove {
  border: 0px !important;

}

styles.btn:

.btn {


  justify-content: center;
}

Upvotes: 2

Views: 1947

Answers (2)

christiansany
christiansany

Reputation: 395

Here is a JS solution for your problem. We're using a state that defaults to false. When hovering the Button (onMouseEnter is triggered), we set it to true. And when leaving the Button (onMouseLeave is triggered), we set it to false.

This enables us to have a value isHovering which holds a boolean that is true when hovering the button and false when not hovering the button. Then we only need to reference that inside our template.

When isHovering is true -> Hovering will be shown. If not -> Not Hovering will be shown.

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

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

And here would be a CSS (SCSS) only solution. This behaves almost the same as the JS example. But here we render two span elements and display/hide them with CSS instead of having a state in our JS.

.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.

Upvotes: 5

OtiK.cz
OtiK.cz

Reputation: 95

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 class="btn"></button>

Upvotes: 3

Related Questions