javascript - Barba JS .mouseenter 在页面转换后不起作用

Question

我一直在尝试使用Barba JS库并遇到了问题。我使用 div 作为光标，将鼠标悬停在文章缩略图上时，光标会展开为按钮。为此，我在 .js 文件中使用 JQuery .mouseenter 和 .mouseleave。一切都在第一个页面加载时完美运行，但在页面转换后 .mouseenter 不再工作。即使我转换回第一个加载页面。脚本文件在所有页面上都正确加载，自定义光标的代码工作正常并且存在于同一个文件中。

我怎么解决这个问题？

这是光标的代码。

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

这是光标文章悬停动画的JS。

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

标签： javascripthtmljquerybarbajspage-transition