Modify the button text when it is hovered over

Question

Modify the button text when it is hovered over

I am attempting to modify the text displayed on a button when hovering over it in a React component from Ant Design. However, I have not been successful so far.

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 tried to achieve this using CSS pseudo-classes like :hover, but unfortunately, the changes are not reflecting as expected.

In my stylesheets, I have defined the following classes:

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

 
  }
}

and

.btnremove {
  border: 0px !important;

}

It seems that there might be an issue with my CSS selectors or specificity. I will continue troubleshooting to resolve this problem.

javascript css reactjs

Answer 1

Answer №1

Provided below is a JavaScript solution to tackle your issue. A state with a default value of false is utilized. Upon hovering over the Button (onMouseEnter triggered), we switch it to true. Conversely, when exiting the Button (onMouseLeave triggered), we revert it back to false.

This setup gives us access to a variable named isHovering, which stores a boolean set to true during button hover and false otherwise. We can then simply refer to this within our template.

When isHovering is true, the message Hovering will be displayed. Otherwise, if not hovering, Not Hovering will appear.

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>
  );
};

An alternative CSS (SCSS) approach is presented here as well. This method operates similarly to the JS example. However, in this case, we render two span elements and control their visibility through CSS rather than maintaining a state in our JavaScript.

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

Answer 2

Provided below is a JavaScript solution to tackle your issue. A state with a default value of false is utilized. Upon hovering over the Button (onMouseEnter triggered), we switch it to true. Conversely, when exiting the Button (onMouseLeave triggered), we revert it back to false.

This setup gives us access to a variable named isHovering, which stores a boolean set to true during button hover and false otherwise. We can then simply refer to this within our template.

When isHovering is true, the message Hovering will be displayed. Otherwise, if not hovering, Not Hovering will appear.

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>
  );
};

An alternative CSS (SCSS) approach is presented here as well. This method operates similarly to the JS example. However, in this case, we render two span elements and control their visibility through CSS rather than maintaining a state in our JavaScript.

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

Answer 3

Answer №2

Modifying content using CSS in :before (or :after). Hover effect only works in the sequence of :hover:before

.btn:before {
  content:'Initial text';
}
.btn:hover:before {
  content:'Text on hover';
}

 <button class="btn"></button>

Answer 4

Modifying content using CSS in :before (or :after). Hover effect only works in the sequence of :hover:before

.btn:before {
  content:'Initial text';
}
.btn:hover:before {
  content:'Text on hover';
}

 <button class="btn"></button>

Modify the button text when it is hovered over

Answer №1

Answer №2

Similar questions

Troubleshooting CORS issue in React and ASP.Net Core 3: Preflight request not passing access control check due to missing 'Access-Control-Allow-Origin' header

How is the purpose of nesting functions within functions achieved in nodejs?

The Access-Control-Allow-Origin error is preventing the Angularjs post request from going through

Please reset the form fields after the most recent edit

Discovering the method to incorporate a data-icon attribute within select options using vue.js

Unexpected Behavior in ComponentDidMount

Tips on handling jsonp responses in CakePHP without using the .json extension

I am looking to create a split div with a diagonal line running through

The best method for sending JSON or JS objects along with Form Data using AJAX POST to PHP for optimal efficiency

Filtering MUI Data Grid by array elements

"Creating a Hyperlink that Navigates to Specific Content Within a

Difficulty with linking a CSS property to an HTML element using JavaScript

Schema-specific conditions for JSON data

Is there a way to retrieve a CSS file using AJAX from a separate origin?

Tips for changing the focus between various modals and HTML pages after minimizing a modal with jQuery

What is the best way to increase the size of this text when an image is hovered over?

How to access the parent array element in a nested ng-repeat in AngularJS

Self-moving button container

Guide on clicking an element within a hidden iframe using Python Selenium

Guidelines for sending an array from a Laravel Controller through AJAX and generating a button based on the received data