He estado experimentando con la biblioteca Barba JS y me encontré con un problema. Estoy usando un div como cursor, al pasar el cursor sobre la miniatura de un artículo, el cursor se expande en un botón. Para esto estoy usando JQuery .mouseenter y .mouseleave en un archivo .js. Todo funciona perfectamente en la carga de la primera página, pero después de que la página haya realizado la transición, .mouseenter ya no funciona. Incluso cuando vuelvo a la primera página de carga. El archivo de script se carga correctamente en todas las páginas y el código para el cursor personalizado funciona bien y existe en el mismo archivo.

¿Como puedó resolver esté problema?

Este es el código para el cursor.

 <div class="cursor flex"> <p id="cursor-text">Visit <br>Article</p> </div>

Y este es el JS para la animación de desplazamiento del artículo del cursor.

 jQuery(document).ready(function($) { var cursor = $(".cursor"); $(window).mousemove(function(e) { cursor.css({ top: e.clientY - cursor.height() / 2, left: e.clientX - cursor.width() / 2 }); }); $(window) .mouseleave(function() { cursor.css({ opacity: "0" }); }) .mouseenter(function() { cursor.css({ opacity: "1" }); }); $(".article-card") .mouseenter(function() { cursor.css({ transform: "scale(1.25)" }); }) .mouseleave(function() { cursor.css({ transform: "scale(1)" }); }); $(".article-card") .on("mouseenter", function() { $('.cursor').addClass("article-cursor") }) .on("mouseleave", function() { $('.cursor').removeClass("article-cursor") }) $(window) .mousedown(function() { cursor.css({ transform: "scale(.2)" }); }) .mouseup(function() { cursor.css({ transform: "scale(1)" }); });