javascripthtmlcsscursortextrange

Change cursor type when the mouse gets over some selected text using HTML/Javascript

I need to change cursor type when the mouse gets over a selected text.

Here you can find an explanatory image :

Image to explain the type of cursor I want http://img190.imageshack.us/img190/1786/72162829.png

In this example the user has to drag some text to the textarea. Since the traditional pointer is not intuitive I would like to use the "move" pointer (cursor:pointer). I made this image with photoshop. Does anyone know how to make it for real in HTML / CSS / JAVASCRIPT ?

Solution

  • Selection styles (not supported in IE) are the only thing that come to mind to achieve the desired effect:

    ::selection {
    color: red;
    cursor: move;   
}

::-moz-selection {
    color: red;
    cursor: move;
}

    ...but, although the text turns red (this is just a control), the cursor doesn't seem to change in either Safari or Firefox. If you wrap the text in an HTML element, however, and apply the styling to the element (via an ID or class), everything works fine.

    You may be able to work around this problem by using JavaScript's window.getSelection() method to wrap the selected text in a DOM element and then style this DOM element. I'm not sure whether this is possible, though (and it might be a bit hacky).