Quiero cambiar el texto del botón al pasar el mouse sobre el botón de reacción del diseño antd Quiero cambiar el texto del botón al pasar el mouse sobre el botón de reacción del diseño antd
Button <div className={ status == "verified" ? `${styles.btn1} ${styles.btn1Contact}` : `${styles.btn} ${styles.btnContact}`} > <Button className={ status == "verified" ? `${styles.btnremove}` : `${styles.btnremove1}`} > {status} </Button> </div>estoy haciendo de esta manera
&:hover { }pero nada está cambiando
estilos.btn:
.btn { display: flex !important; { margin-top: 10px; } &:hover { color: $fade-color; } &:focus { color: $fade-color; } } }estilos.btn1:
.btn1 { @media only screen and (max-width: $max-size-2) { margin-top: 10px; } } }estilos.btn1
.btnremove { border: 0px !important; }estilos.btn:
.btn { justify-content: center; }Aquí hay una solución JS para su problema. Estamos usando un estado que por defecto es false . Al pasar el botón ( onMouseEnter se activa), lo configuramos como true . Y al salir del Botón ( onMouseLeave se activa), lo configuramos en false .
Esto nos permite tener un valor isHovering que contiene un valor booleano que es true cuando se desplaza el botón y false cuando no se desplaza el botón. Entonces solo necesitamos hacer referencia a eso dentro de nuestra plantilla.
Cuando isHovering es true -> Se mostrará Hovering . Si no es así, se mostrará Not Hovering .
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> ); }; Y aquí sería una solución única de CSS (SCSS). Esto se comporta casi igual que el ejemplo de JS. Pero aquí representamos dos elementos span y los mostramos/ocultamos con CSS en lugar de tener un estado en nuestro 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> ); };Ambas soluciones son accesibles.
Cambie el contenido con CSS en :before (o :after ). Hover funciona solo en este orden :hover:before
.btn:before { content:'Init value'; } .btn:hover:before { content:'Hover value'; } <button class="btn"></button>