Reversed pointer in CSS3

Question

I have a web application in which I need the cursor to be horizontaly reversed (flipped right to left) when I hover one element like in Microsoft Word or Notepad++ :

And I didn't found it in the pointer list.

I know I can use this :

#reversedCursor:hover
{
    cursor: url("pointer.png"), pointer;
}

But the cursor location will be at the top left corner of the image, and I want it at the top right corner.

I don't want something hard to implement with changing elements positions, or other things like that.

To sum up : is it possible to change the pointer to the reversed one, or is it possible to set the cursor position somewhere in the cursor image ? If yes, can you give me an example ?

I hope you understand what I need.

Answer 1

You can specify the position of the cursor hotspot using css3:

cursor: [ <uri> [ <x> <y> ]? , ]* <system>;

so in your case something like:

cursor:  url("pointer.png") 25 0, pointer;