Tengo esta matriz de objetos que contiene los datos.
const teamSliderContent = [ { Describtion1 : "Chef. Mordy Wenk", Title : "Head of the Chief staff.", Img : "https://user-images.githubusercontent.com/86873404/167750109-5c3dec09-3631-47ae-8823-9625ba9e904f.jpg", id : 1 },{ Describtion1 : "Chef. Mark Brunnett", Title : "Junior chef.", Img : "https://user-images.githubusercontent.com/86873404/167750117-aa571b55-6e9e-4850-933d-ad357be73176.jpg", id: 2 }]En mi código, tengo un pequeño ícono que aparece cuando paso el mouse sobre la imagen
<InfoIcon style={iconMove} transition={"0.4s"} color="#46111D" transform={"translate(-25px , 25px)"} fontSize={30} />, así que lo estoy logrando con este código:
const [iconMove, setIconMove] = useState({transform:"translate(-25px , 25px)"}) <Image onMouseEnter={e => { setIconMove({transform:"translate(25px,-25px)"}) }} onMouseLeave={e => { setIconMove({transform:"translate(-25px , 25px)"}) }} src={item.Img} />y eso se hace porque tengo OverFlow como oculto en el contenedor de la imagen, por lo que mi problema es que cuando paso el mouse sobre cualquier Imagen de estos, todos los íconos aparecen al mismo tiempo, ¿cómo puedo hacerlo solo cuando paso el mouse? en cierta imagen aparece el icono de esta única imagen? Sé que está relacionado con la identificación de cada objeto, pero aún no puedo entender cómo hacerlo. Espero que mi pregunta haya sido clara y sencilla.
Cada componente <Image> necesitará su propio estado de componente iconMove , por lo que debe almacenarlo por separado en el nivel del componente <Image> .
El problema es que actualiza el estilo cuando se desplaza sobre una determinada imagen y usa ese estilo para todos los InfoIcons. Para obtener la solución deseada, debe realizar un seguimiento de qué InfoIcon debe recibir el estilo.
Dado que el estilo utilizado en el InfoIcon solo depende de qué imagen se desplaza y cuál no. Sugeriría actualizar el estado para realizar un seguimiento de la imagen que se desplaza (esto se puede lograr usando la identificación o algún otro indicador como el índice del mapa).
const [hovered, setHovered] = useState(-1) let show = {transform:"translate(25px,-25px)"} let hide = {transform:"translate(-25px,25px)"} <Image onMouseEnter={e => {setHovered(id)}} onMouseLeave={e => {setHovered(-1)}} src={item.Img} />Y en función de ese estado, puede elegir el estilo que se usará en el InfoIcon, se vería así.
<InfoIcon style={hovered == id ? show : hide} transition={"0.4s"} color="#46111D" fontSize {30} />