CODEWITHSUNDEEP
css
beck5
beck5

Reputation: 71

Multiple custom cursors

I understand that you can use CSS to change the cursor between the default and to a custom URL, and I know that you can set specific cursors for specific elements. What I want to do is set cursors for the defaults so that when the user hovers over any element which brings up the click finger cursor, my own custom click finger will appear.

To explain it another way, imagine a selector that instead of running whenever the user hovers over a certain element, it would run whenever the web page changes the cursor to one of the default.

I think that I have done an ok job of explaining this but if I don't make sense I will happily explain further.

Upvotes: 2

Views: 2954

Answers (2)

Tik
Tik

Reputation: 882

For a customer CSS cursor its much like any other CSS element use url()

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor?v=example 

cursor: url(path/to/image), auto;

No need for javascript if you wanted this to be on every link then:

a:hover{
   cursor: url(path/to/image), auto;
}

Upvotes: 1

Luke Sheltraw
Luke Sheltraw

Reputation: 61

You can easily do this using Javascript:

var elements = document.getElementsByTagName("*");
// gets array of every element
for(var counter = 0; counter < elements.length; i ++) {
// loops through every element
if(window.getComputedStyle(elements[counter]).cursor == "pointer") {
// checks if the element uses a "pointer" cursor
    elements[counter].style.cursor = "url(/*   Your cursor's URL   */)";
// if it does, the cursor is replaced with yours
}
}

Upvotes: -1

Related Questions