Custom Cursor in Divi

This is a little script that let’s you add a custom cursor to your website.

You can get the links to the uploaded images in your Media Library.

The following code needs to be placed in “Divi Options -> Integration -> Add code to the < body >”

<script>
  jQuery(function($){

    //Add the link to the image of your regular cursor below
    var cursor = "https://example.com/regular_cursor.png";

    //Add the link to the image that should show on hover
    var cursor_hover = "https://example.com/hover_cursor.png";

    //set the size of the cursor in pixel
    var cursor_width = "80";

    //set if the default cursor should still be shown "true", or if it should be hidden "false"
    var hide_real_cursor = "true";

    //if you want the image to have a delay, enter the delay in miliseconds (1000 miliseconds are 1 second)
    //chose 0 if you don't want any delay
    //if you choose a value above 0 I recommend setting the "hide_real_cursor" to "false"
    var cursor_delay = 0;
    
    var mouseX, mouseY;
    
    var img = $('<img id="mouseCursor">');
    img.attr('src', cursor);
    img.css({
      "position":"fixed",
      "top":0,
      "left":0,
      "width":cursor_width,
      "z-index":999,
      "pointer-events":"none",
      "transform":"translate(-50%,-50%)"
    });

    img.appendTo('body');
    
    $('*').each(function(){
      var currentCursor = $(this).css('cursor');
      if(currentCursor == "pointer"){
        console.log("set");
        $(this)[0].setAttribute("customHover",true);
      };
    })
    
    $('*').mouseenter(function(){
      console.log($(this)[0].getAttribute("customHover"));
      if($(this)[0].getAttribute("customHover") == "true"){
        $("#mouseCursor").attr("src",cursor_hover);
        $(this).mouseout(function(){
          $("#mouseCursor").attr("src",cursor);
        })
      }
    });
    
    $(document).mousemove(function(event) {
      mouseX = event.pageX;
      mouseX = event.pageY;
      if(cursor_delay > 0){
        setTimeout(function(){
          img.css({
            "top":event.clientY,
            "left":event.clientX
          });
        },cursor_delay);
      }else{
        img.css({
          "top":event.clientY,
          "left":event.clientX
        });
      }
      
    });

    if(hide_real_cursor == true){
      $('*').css("cursor","none");
    }
  })
</script>