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;
});
});