CODEWITHSUNDEEP
javascriptjquerycursormouseover
Cruz Dusk
Cruz Dusk

Reputation: 1

How to Cursor & Add Hover effect using js?

I want to add Custom set of cursor on my website. I have added that cursor but while hover anything that cursor change I have the Set of Pointers including both .ani & .cur required for my site. I have already tried :

This is the JavaScript that I used !

<script>
document.getElementsByTagName("body")[0].style.cursor = "url('cursor/blue.cur'), auto";
</script>

My cursor:

bluecursor

I have its Set , but I dunno the code to set while cursor for crosshair ,help , wait etc.

cursorset

Is this possible?

Upvotes: 0

Views: 426

Answers (4)

Ertugrul
Ertugrul

Reputation: 35

This code worked for me (not JS but jQuery):

$("body").css('cursor', 'url(arrow_blue.cur) , auto');

$(".button").mouseover(function(){
    $(this).css('cursor', 'url(arrow_blue.cur) , auto');
});

Don't forget to override if there is any specific items like buttons, etc... Just defining a cursor for body does not cover the elements under, if something special is defined for them. So you have to override, for mouseover etc...

Upvotes: 0

jme11
jme11

Reputation: 17397

If you want to do this, it is better to do it in css:

For example, if you wanted to have the cursor change to your custom cursor only when hovering over an anchor tag then you can do this:

a {
  cursor: url(cursor/bluecursor.cur), auto;
}

If you wanted to have the cursor ALWAYS use custom cursors, then you have to decide when to use a special cursor. You can do this with classes:

.help {
  cursor: url(cursor/help.cur), auto;
}

Then apply that class to the particular element that you want to display the custom cursor:

<div class="help">Help Me</div>

There is no way (to my knowledge) to simply tell the browser just replace all cursors with a custom set.

Upvotes: 0

martenolofsson
martenolofsson

Reputation: 531

If you have to do this with javascript it seems as a bether idea to have a class in your css with the desired behaviour/style and then only set that class with javascript.

Upvotes: 0

joeltine
joeltine

Reputation: 1630

All supported cursors can be enabled through CSS: http://www.w3schools.com/cssref/pr_class_cursor.asp

Upvotes: 0

Related Questions