0

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)"
            });
        });
JLK
  • 11
  • 1
  • So you replace the content of the page and wonder why things that were not bound are not triggering code that ran before it? You either need to rebind all the events on each page transition (is there an event?) or you need to use event delegation. – epascarello Nov 01 '21 at 15:24
  • `$(window).on("mousenter", ".article-card", function () {}).on("mousleave", ".article-card", function () {});` – epascarello Nov 01 '21 at 15:26
  • Many thanks for your answer @epascarello! I understand what you're saying. I've tried to edit the code but now the cursor doesn't animate at all anymore? What am I doing wrong? ` $(window) .on("mousenter", ".article-card", function() { $('.cursor').addClass("article-cursor") }) .on("mousleave", ".article-card", function() { $('.cursor').removeClass("article-cursor") });` `code` – JLK Nov 01 '21 at 16:05
  • You are going to have to find the cursor each time. `var cursor = $(".cursor");` is going to point to the original one that was replaced. – epascarello Nov 01 '21 at 16:09

0 Answers0