1

Estoy haciendo una pagina web en la que tengo 8 divs uno encima del otro. Quiero que cuando el cursor pase por encima de uno de estos divs, éste cambie por una imagen. La imagen debe ser diferente en cada div. Ya intenté con javascript y con css pero siempre me pasa el mismo problema: sólo funciona con UNA imagen especifica. Si esta imagen especifica se le asigna a cada div (para que cuando el cursor pase por encima del div éste cambie) sí cambia, en los 8 divs sucede. Pero si la imagen es otra, no funciona, el cursor no cambiará. Entonces el problema es con las imagenes, solo se puede hacer el efecto con una imagen, y debe ser ESA imagen, pues si elimino dicha imagen y uso de misma forma otra imagen, tampoco funciona. No tengo idea de porque pasa esto, parece ser un problema del elemento 'cursor' y que sólo acepte una imagen (???) Espero puedan ayudarme.

HTML (mire el segundo .title):

    <div class="wrapper">
        <div class="title" data-cursor-image="images/image.jpeg">Proyecto 1</div>
    </div>
    <div class="wrapper">
        <div class="title" data-cursor-image="images/image2.jpeg">Proyecto 2</div>
    </div>
    <div class="wrapper">
        <div class="title" data-cursor-image="images/image.jpeg">Proyecto 3</div>
    </div>
    <div class="wrapper">
        <div class="title" data-cursor-image="images/image.jpeg">Proyecto 4</div>
    </div>
    <div class="wrapper">
        <div class="title" data-cursor-image="images/image.jpeg">Proyecto 5</div>
    </div>
    <div class="wrapper">
        <div class="title" data-cursor-image="images/image.jpeg">Proyecto 6</div>
    </div>
    <div class="wrapper">
        <div class="title" data-cursor-image="images/image.jpeg">Proyecto 7</div>
    </div>
    <div class="wrapper">
        <div class="title" data-cursor-image="images/image.jpeg">Proyecto 8</div>
    </div>
</div>

SCSS

.middle {
    //outline: red 1px solid;
    height: 80vh;
    margin-top: 3vh;
    margin-bottom: 3vh;

    display: grid;
    grid-template-rows: repeat(1fr, 8);

    .wrapper {
        //outline: green 5px solid;
        display: flex;
        justify-content: center;

        div {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 50%;
            height: 100%;
            font-size: 4vw;
            font-family: 'Poppins';
            //outline: black 5px solid;
        }
    }
}

JS:

let titles = document.querySelectorAll('.title');
let originalCursor = document.body.style.cursor;

titles.forEach(function(title) {
    let cursorImage = title.getAttribute('data-cursor-image');

    title.addEventListener('mouseover', function() {
        console.log(cursorImage)
        document.body.style.cursor = `url(${cursorImage}), auto`;
    });

    title.addEventListener('mouseout', function() {
        console.log(cursorImage)
        document.body.style.cursor = originalCursor;

    });
    
});
1
  • Buenas, has probado un ::hover del css evitando el javascript?. Podrias usar la propiedad background-image() y al pasar el cursor cambiaria la imagen el 12 abr. a las 9:34

1 respuesta 1

0

Primero que nada: No somos adivinos, si quieres que ayudemos a resolver tu problema asegurate de colocar tu código correctamente. El CSS desordenado y mal puesto y además olvidaste agregar <div class="middle">, tenias una etiqueta de cierre de un DIV que no existia.

Respecto a tu código, lo he mejorado y lo he comentado para que te sea fácil entenderlo. Simplemente seleccionamos todos los elementos con la clase title y agregamos los eventos de mouseover y mouseout a cada uno de ellos.

Simplemente reemplaza los url aleatorios que puse por images/image1.jpg y así sucesivamente.

Código:

// Seleccionamos todos los elementos con la clase title
const titulos = document.querySelectorAll(".title");

// Creamos una variable para almacenar la imagen actual
let imagenActual;

// Iteramos sobre cada elemento con la clase title agregando eventos de mouseover y mouseout
titulos.forEach((title) => {
  title.addEventListener("mouseover", () => {
    // Obtenemos la ruta de la imagen del atributo 'data-cursor-image'
    const rutaDeImagen = title.dataset.cursorImage;
    if (imagenActual) {
      // Si ya hay una imagen cargada, la eliminamos del DOM
      imagenActual.remove();
    }
    // Creamos una nueva instancia de imagen y le asignamos la ruta obtenida
    const tuImagen = new Image();
    tuImagen.src = rutaDeImagen;
    // Añadimos una clase personalizada a la imagen (OPCIONAL, PUEDES ELIMINAR ESTA LINEA)
    // O puedes agregar tus propias clases (Revisa que existan en el HTML)
    tuImagen.classList.add("personalizada");
    // Añadimos la imagen al cuerpo del documento
    document.body.appendChild(tuImagen);
    // Actualizamos la variable 'imagenActual' con la nueva imagen cargada
    imagenActual = tuImagen;
  });

  title.addEventListener("mouseout", () => {
    if (imagenActual) {
      // Si hay una imagen cargada, la eliminamos del DOM y establecemos la variable 'imagenActual' en null
      imagenActual.remove();
      imagenActual = null;
    }
  });
});
.personalizada {
  position: absolute;
  z-index: 9999;
  pointer-events: none;
}
<div class="middle">
  <div class="wrapper">
    <div class="title" data-cursor-image="https://picsum.photos/id/10/200/300.jpg">Proyecto 1</div>
  </div>
  <div class="wrapper">
    <div class="title" data-cursor-image="https://picsum.photos/id/11/200/300.jpg">Proyecto 2</div>
  </div>
  <div class="wrapper">
    <div class="title" data-cursor-image="https://picsum.photos/id/12/200/300.jpg">Proyecto 3</div>
  </div>
  <div class="wrapper">
    <div class="title" data-cursor-image="https://picsum.photos/id/13/200/300.jpg">Proyecto 4</div>
  </div>
  <div class="wrapper">
    <div class="title" data-cursor-image="https://picsum.photos/id/14/200/300.jpg">Proyecto 5</div>
  </div>
  <div class="wrapper">
    <div class="title" data-cursor-image="https://picsum.photos/id/15/200/300.jpg">Proyecto 6</div>
  </div>
  <div class="wrapper">
    <div class="title" data-cursor-image="https://picsum.photos/id/16/200/300.jpg">Proyecto 7</div>
  </div>
  <div class="wrapper">
    <div class="title" data-cursor-image="https://picsum.photos/id/17/200/300.jpg">Proyecto 8</div>
  </div>
</div>

1
  • Ah si perdona tienes razón olvide poner esta línea <div class="middle"> pero gracias !! Intentaré ser más ordenado en esto de stackoverflow
    – Antonio
    el 13 abr. a las 17:44

Tu Respuesta

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

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