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.