0

Mi idea es hacer una página con contenido del lado izquierdo, y un gif del lado derecho que le hable a la persona cuando ponga su mouse sobre cierto elemento como por ejemplo un texto, un botón, un título, etc. Sé como posicionarlo, y mi idea es que hay un gif, pero cuando pongo el puntero sobre un texto, pasa a ser otro gif que hace animacion de hablar y al lado te pone texto donde estes haciendo hover con el puntero, pero no tengo idea de cómo hacer que cada vez que haga hover por encima de x lugar me devuelva un texto. Lo probé de forma básica y solo pude hacerlo hablar sobre 1 elemento de los 10 que podría tener mi página, si pongo más de uno no puedo, y lo hice usando el .div:hover + .div-2 { display:block. No creo que sirva poner mi código aquí porque no tengo un ejemplo fijo, solo algo que intenté al azar, aunque si lo requieren necesario, podría subirlo.

1
  • Tal como lo cuentas, diciendo que lo conseguistes en uno pero no en el resto, yo aplicaria la misma clase a todos esos elementos y pondria el código que te funciona apuntando a esa clase. Sino también puedes mirar esta respuesta a ver si te ayuda: es.stackoverflow.com/questions/290860/…
    – masterguru
    Commented el 14 feb. 2022 a las 4:23

1 respuesta 1

1

Solo con css no podríamos llegar más lejos de lo que has logrado, porque como mínimo necesitan compartir el mismo padre y no se cumpliría lo que dices "desde cualquier lado de la página", porque no hay forma de que puedas hacer referencia a un div desde cualquier div arbitrario de toda la página, al menos no por css, te sugiero usar JS para eso.

De todas formas te dejo un ejemplo puro css utilizando el selector ~que selecciona elementos precedidos de otro sin importar que esté consecutivo.

.container {
display: flex;
}
.text {
  padding: 15px;
  margin: 5px;
  background: #f57170;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}
.gif {
  display: none;
}
.gif, .gif-default {
  padding: 15px;
  margin: 5px;
  background: #10ddc2;
  color: #fff;
  border-radius: 5px;
  
}


.text:hover ~ .gif-default  {
  display: none;
}

.text-1:hover ~ .gif-1  {
  display: block;
}

.text-2:hover ~ .gif-2  {
  display: block;
}

.text-3:hover ~ .gif-3  {
  display: block;
}
<div class="container">
  <span class="text text-1">show gif 1</span>
  <span class="text text-2">show gif 2</span>
  <span class="text text-3">show gif 3</span>

  <div class="gif-default"> default-gif </div>
  <div class="gif gif-1"> gif 1 </div>
  <div class="gif gif-2"> gif 2 </div>
  <div class="gif gif-3"> gif 3 </div>
</div>

2
  • ¿Pero es totalmente necesario que estén en el mismo div?
    – Dazer
    Commented el 14 feb. 2022 a las 6:20
  • Si lo quieres hacer con puro css, si. (Y bueno, también puedes meter los gif en un div;) Pero no puedes tener el texto en un div, luego subir a un div superior y bajar al gif.
    – Ali
    Commented el 14 feb. 2022 a las 15:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.