Is it possible to put the mouse cursor behind an element or does the mouse cursor have an z-index?

Question

I would like to replace the mouse cursor with an custom image when the mouse hovers over a certain element. I do it by setting the mouse curser off first with

cursor: none;

when it hovers the element.

Then I read out the cursor position on the hovered element and set the css position of a graphic to the cursor position with a slight offset, so that the mouse curser is not over the graphic but still over the hover area.

I made a fiddle here: http://jsfiddle.net/TimG/6XeWK/

Now it works quiet allright. The problem is just when you move the mouse very fast, the mouse cursor leaves the hover area and "slips" over the image what of course makes it impossible to determine the mouse position relative to the hover area (move very fast to the bottom left on the black hover area). I could make it a little harder to slip out of the hover area by setting the graphic to

display: none;

before the images' css position is changed and after it is changed setting it to

display: block;

again. Unfortunately it does not prevent this problem fully.

So: Is there any way of preventing this? Or is there a way to put the mouse cursor behind the hand? Kind of like setting a z-index to the mouse-cursor (my guess is, that it would not be possible, as it is no DOM element)?

Thx for any help.

Answer 1

Question

is there a way to put the mouse cursor behind the hand?

The reason you see the mouse pointer when you move the mouse fast is that you occasionally end up with the cursor over the pointer, thus the .hoverbox:hover style is not applied.

In your mousemove event binding add the css style for cursor: none also to the pointer and you should not see the mouse pointer at all anymore even when accidentally moving over the hand. Applying the cursor: none to the .pointer:hover in CSS does not work as well.

$(".hoverBox").mousemove(function(e) {
    var tWidth = $(window).width();
    var position = $(this).position();
    var fingerPosition = position.top + e.clientY + 15;
    var fingerWidth = $(this).parent().find('.pointer').width();

    $('.pointer').css('display', 'none').css('top', fingerPosition).css('left', e.clientX - fingerWidth - 15).css('display', 'block').css('cursor', 'none');
});

DEMO - Hiding cursor when over pointer

Edit
I could not get the cursor: url() to work in fiddler but I'm guessing this is mainly down to the fact that fiddler renders output trough fiddle.jshell.net and the image might have to be local to the server.

But if all you want to use is a pointer-hand, you could always use the cursor: pointer style as well.

CSS:

.hoverBox {
    width: 400px;
    height: 300px;
    background: black;
    cursor: pointer;
}

DEMO - Using the default pointer cursor