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