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>