0
459
Vistas¿Cómo puedo activar solo la propiedad de estilo para el componente flotante usando NextJS?
Quiero poder desplazar algún componente y mostrarlo con características especiales de CSS. Entonces, por ejemplo, si paso el mouse sobre el elemento A, solo quiero que el elemento A se distinga de los demás elementos.
En este momento tengo este enfoque cambiando la imagen de fondo del elemento, este es mi código:
const StatsIndicadores = () => { const somearray = ['10%', '50%', '60%', '60%'] const [isHovering, setIsHovering] = useState(false) const [hoverStyle, setHoverStyle] = useState({}) const [index, setIndex] = useState(0) const mouseEntered = (index) => { setIsHovering(true); setIndex(index + 1); } const mouseLeft = () => setIsHovering(false) useEffect(() => { if (isHovering) { setHoverStyle({ background: `center url("/images/stats/rounded-images/${index}.png") no-repeat`, border: '1px solid #f5f5f5', boxShadow: '0px 0px 10px #f5f5f5', transition: 'all 0.3s ease-in-out' }); } else { setHoverStyle({}); } }, [isHovering]); return ( <> {<Grid container className={style.test}> { somearray.map((item, index) => ( <Grid item xs={12} md={3} key={index}> <div className={style.statsContainer}> <div className={style.circle} style={hoverStyle} onMouseEnter={(e) => { mouseEntered(index) }} onMouseLeave={mouseLeft}> <p className={style.circleStats}>Some value</p> <p className={`${style.circleStats} ${style.circleStatsDescription}`}>Ver más</p> </div> <p className={style.indicador}>Some name</p> </div> </Grid> )) } </Grid>} </> ) } Cuando paso el cursor sobre algún elemento en el mapa, esto es lo que obtengo: 
No quiero mostrar la imagen de fondo en los otros círculos, pero no sé cómo mostrarla solo en el que está sobre el cursor. Tengo la idea de comparar el índice del elemento flotante y si ese está activo, mostrar el fondo ... pero no puedo entender qué forma de hacerlo sería la mejor.
1 Respuestas
Responde la pregunta0
A partir de ahora, estás aplicando los estilos a todos los círculos cuando se pasa el cursor sobre uno de ellos. Debe aplicar condicionalmente los estilos en función del círculo flotante activo (puede usar cualquier propiedad que sea única; en el ejemplo a continuación, usé una identificación).
Código de demostración :
Código:
import { useState } from "react"; import "./styles.css"; const data = [ { id: 1, url: "https://images.dog.ceo/breeds/terrier-american/n02093428_3305.jpg" }, { id: 2, url: "https://images.dog.ceo/breeds/terrier-american/n02093428_10245.jpg" }, { id: 3, url: "https://images.dog.ceo/breeds/terrier-american/n02093428_1345.jpg" }, { id: 4, url: "https://images.dog.ceo/breeds/terrier-american/n02093428_10947.jpg" }, { id: 5, url: "https://images.dog.ceo/breeds/terrier-american/n02093428_5331.jpg" } ]; export default function App() { const [activeId, setActiveId] = useState(0); const setActiveElementOnHover = (id) => { setActiveId(id); }; const resetActiveElementOnLeave = () => { setActiveId(0); }; return ( <div className="app"> <h1 className="headline">Dog Gallery</h1> <div className="gallery-container"> {data.map(({ id, url }) => ( <div key={id} role="presentation" className="circle" style={{ background: activeId === id ? `center / cover no-repeat url(${url})` : "" }} onMouseEnter={() => setActiveElementOnHover(id)} onMouseLeave={resetActiveElementOnLeave} > <p>Dog #{id}</p> </div> ))} </div> </div> ); }estilos:
.app { font-family: sans-serif; text-align: center; } .gallery-container { display: flex; align-items: center; justify-content: center; width: 800px; margin: 0 auto; } .circle { padding: 75px; border-radius: 50%; background: navy; color: white; margin: 0 10px; } .headline { font-size: 10rem; color: navy; } p { padding: 0; margin: 0; }