Change my cursor pointer to a custom cursor

Question

I saw this topic but it wasn't of any help: "html, css - cursor - how to change default image for pointer".

Is there any way I can use CSS to resolve this issue, b/c I'm not allowed to use JScript on someone else's website where I am configuring my profile on. I can only use CSS Markup and HTML Markup. There can't be a way to use JScript in the CSS Markup, right?

Description: When the arrow cursor is over other elements, the pointer cursor pops in and I need that pointer cursor changed to a custom cursor.

This is the cursor I want:

enter image description here

What may work, but I don't how to put it in my code below and nor do I know what to replace (my_cursor.svg) with: body { cursor: url(my_cursor.svg), auto; }

body , html { 
    height: 100%; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
    background: #000 url('http://1hdwallpapers.com/wallpapers/undead_dragon.jpg') no-repeat fixed center;  
    background-size:contain; 
    cursor: url('http://www.rw-designer.com/cursor-view/21962.png'), url('cute25.cur'), help; 
}

div#mask { 
    cursor: not-allowed;
    z-index: 999; 
    height: 100%; 
    width: 100%; 
}

Your code is a mess with missing braces and all. Can you fix it? — Shahar
You're code works, just needed to be cleaned up jsfiddle.net/q3mjpfeg — im_brian_d
Ps, try to avoid repeating the question on Stackoverflow, you'll notice people write duplicate on questions because it's generally the goal to not repeat questions when suitable answers have been given =) Just informing you. — im_brian_d
Oh! I got it. The problem wasn't this part of my code at all it was this line that I had in the rest of my css: ".contentModule { color: #FF00FF; border: 1px solid transparent; background: transparent; li {cursor: pointer}}" — Serliek
I had "...cursor: pointer; }" instead of "...li {cursor: pointer}}" Sooooo sorry for reposting this question as I will mark an answer based on the comments I just sent. :) — Serliek

Serliek Serliek · Accepted Answer · 2014-08-20T01:02:04

That part of my code wasn't the problem at all. It was this line that I had as part of the rest of my css that I did not post on this question:

.contentModule { color: #FF00FF; border: 1px solid transparent; background: transparent; li {cursor: pointer}}"

I had "...cursor: pointer; }" instead of "...li {cursor: pointer}}".

Change my cursor pointer to a custom cursor

1 Answers