Question 351515 in Html Question posted in
Some basic documentation can be found here.

Html – How to Use and Image for a Mouse Pointer using Vanilla JavaScript?

I’m trying to create a mouse cursor that uses an image instead of the default pointer.

I’ve created a class and set the cursor to point an image in my CSS;

/* CSS Basic Reset */
*, *::after, *::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    height: 100%;
}

.mouse-pointer {
    cursor: url('/assets/images/cursor.png'), auto;
}

Then, I’m creating a logical division element with JavaScript, adding the 'mouse-pointer class to it, and appending the mousePointer element to the document.body;

const mousePointer = document.createElement('div');
mousePointer.classList.add('mouse-pointer'); // Update to 'mouse-pointer'

document.body.appendChild(mousePointer);

I was expecting to see an image instead of the default mouse cursor, but I see nothing. I’m new to this, so I’m not sure what I’m doing wrong.

I’m not looking for solutions in JQuery, or anything else outside of vanilla JavaScript. I’m not looking to use CSS to accomplish this effect either.

Thanks.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The solution was more simple than I expected. Here's my solution.

    document.body.style.cursor = 'url(../assets/images/cursor.png), auto';

    That being said, this isn't the solution I was hoping for because it's not a solution to the specific problem I was having. The problem I had is still present, I'm just using something different to accomplish something similar.


  2. 0

    If you’re looking to change the mouse cursor globally across the entire webpage using JavaScript without altering the CSS for the whole body or document directly, you need to set the cursor style at a higher level, ideally on the body or html tag.

    Here’s how you could do it directly with JavaScript:

    document.documentElement.style.cursor = 'url("/assets/images/cursor.png"), auto';
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search