Imagen emergente y sigue el ratón cuando el buceador en el texto -- elemento problema cuando se desplaza hacia abajo

Estoy trabajando en una imagen (en este caso, una plaza roja) que aparece y sigue el ratón cuando se mueve en un texto específico.

El problema es que, aunque funciona perfectamente al principio, una vez que desplace la imagen cambia la distancia con el ratón, perdiéndose eventualmente. Parece que estoy haciendo algo mal pero no puedo verlo.

Aquí adjunto el código:

  $('.imagetooltip').mousemove(function (e) {
  $('span', this).css({left: e.pageX + 0, top: e.pageY + 0});
}); 

.imagetooltip span {
  position: fixed;
  opacity: 0;
  transition: opacity .5s ease-in-out;
}

.imagetooltip:hover span {
  opacity: 1;
}

      

        
HERE A SHORT TEXT

      
      

        
HERE A SHORT TEXT

      
      

        
HERE A SHORT TEXT

      
      

        
HERE A SHORT TEXT

      
      

        
HERE A SHORT TEXT

      
      

        
HERE A SHORT TEXT

      
      

        
HERE A SHORT TEXT

      
      

        
HERE A SHORT TEXT

      
      

        
HERE A SHORT TEXT

      
      

        
HERE A SHORT TEXT

      
      

        
HERE A SHORT TEXT

      
      

        
HERE A SHORT TEXT

      
      

        
HERE A SHORT TEXT

      
      

        
HERE A SHORT TEXT

      
      

        
HERE A SHORT TEXT

      
      

        
HERE A SHORT TEXT

      
      

        
HERE A SHORT TEXT

      
      

        
HERE A SHORT TEXT

      
      

        
HERE A SHORT TEXT

      
      

        
HERE A SHORT TEXT

      
    

Agradeceré cualquier sugerencia/mejoramiento en el código:)

¡Muchas gracias por adelantado y alegrías!

*Nota: El fragmento de código no es capaz de mover la plaza roja y seguir el ratón, pero cuando ejecuto el código localmente no tengo ningún problema JQuery :S

Pregunta hecha hace 3 años, 4 meses, 28 días - Por debugdynamo

3 Respuestas:

• Primera cosa, span es un elemento inline y div es elemento bloque. Así que tener un div dentro span no es una buena práctica, también, sería mejor, si anidas span dentro span y dar interior span display:block o display: inline-block propiedad.

  Segundo, cambio position: fixed a position:absolute.

  .imagetooltip span {
        position: absolute;
        opacity: 0;
        transition: opacity .5s ease-in-out;
   }
  

  Respondida el Dec 17, 2020 a las 18:56 - por webweaverx

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---

• El problema que estás experimentando puede deberse a que estás utilizando la posición fija para el elemento de la imagen (span) que debería seguir al ratón. La posición fija hace que el elemento se posicione de forma absoluta con respecto a la ventana del navegador, en lugar de moverse con el contenido de la página, lo que puede causar que se desplace de su posición original cuando la página se desplaza hacia abajo.

  Para solucionar este problema, te recomendaría cambiar la posición de la imagen a absoluta en lugar de fija. De esta manera, el elemento seguirá al ratón dentro de su contenedor sin importar el desplazamiento de la página. Aquí te dejo la modificación que puedes hacer en tu código:

  En el CSS, modifica la regla para .imagetooltip span de la siguiente manera:

  css
  .imagetooltip span {
    position: absolute;
    opacity: 0;
    transition: opacity .5s ease-in-out;
  }
  

  Con este cambio, el elemento de la imagen ahora debería seguir al ratón correctamente incluso cuando se desplaza la página hacia abajo. Prueba esto y verifica si se soluciona tu problema. ¡Espero que te sea de ayuda! Si tienes alguna otra pregunta, no dudes en decírmelo.

  Respondida el Dec 18, 2020 a las 18:56 - por Gpt

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---

• Revisemos el código paso a paso para identificar el problema:

  • Evento `mousemove`:

  - El evento `mousemove` se adjunta al elemento `.imagetooltip`. Esto asegura que cuando el ratón se mueva sobre este elemento, se ejecute el código dentro del controlador de eventos.

  • Ajuste de la posición de `span`:

  - Dentro del controlador de eventos, el código calcula la posición del puntero del ratón usando `e.pageX` y `e.pageY`.

  • Luego, ajusta la posición del elemento `span` (que contiene la imagen) usando `css()` para que siga al puntero del ratón.

  Ahora, analicemos el problema:

  • Desplazamiento del ratón:

  - El problema parece ocurrir cuando desplazas hacia abajo la página. Esto indica que el cálculo de la posición del puntero del ratón puede no estar teniendo en cuenta correctamente el desplazamiento.

  • Posición incorrecta:

  - Después de desplazarte hacia abajo, la imagen puede comenzar a perderse con respecto al puntero del ratón. Esto sugiere que el código no está ajustando correctamente la posición de la imagen para compensar el desplazamiento.

  Para solucionar este problema, podemos modificar el código para tener en cuenta el desplazamiento de la página al calcular la posición del puntero del ratón. Aquí tienes el código actualizado:

  ```javascript $('.imagetooltip').mousemove(function (e) { // Obtiene el desplazamiento actual de la página var scrollTop = $(window).scrollTop(); var scrollLeft = $(window).scrollLeft();

  // Ajusta la posición del puntero del ratón para tener en cuenta el desplazamiento var adjustedX = e.pageX - scrollLeft; var adjustedY = e.pageY - scrollTop;

  // Ajusta la posición del elemento span usando las coordenadas ajustadas $('span', this).css({left: adjustedX + 0, top: adjustedY + 0}); }); ```

  Este código actualizado asegura que la posición del puntero del ratón se ajuste correctamente según el desplazamiento de la página, lo que debería resolver el problema de la imagen que se desplaza.

  Respondida el Dec 18, 2020 a las 19:10 - por Gemini

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---