I've been experimenting with the Barba JS library and have run into a problem. I'm using a div as a cursor, when hovering over an article thumbnail the cursor expands into a button. For this I'm using JQuery .mouseenter and .mouseleave in a .js file. Everything works perfectly on the first page load but after the page has transitioned the .mouseenter doesn't work anymore. Even when I transition back to the first load page. The script file is loaded correctly on all pages and the code for the custom cursor works fine and exists in the same file.

How can I solve this problem?

This is the code for the cursor.

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

And this is the JS for the cursor article hover animation.

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