Change cursor type when moving mouse over selected text using HTML / Javascript

Question

I need to change the type of cursor when the mouse iterates over the 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 must drag some text into the text box. 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 do this for real in HTML / CSS / JAVASCRIPT?

Answer 1

( IE) - , :

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

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

... , ( ), , , Safari, Firefox. , HTML- ( ), .

, JavaScript window.getSelection(), DOM, DOM. , ( ).

Answer 2

Tzury Bar Yochay, CSS JavaScript.

CSS. cursor, ( ) ( ). , "clickable" -, :

.clickable {
  cursor: pointer;
}

( style head [ - ].) .

JavaScript. style CSS, :

var element = document.getElementById('someid');
element.style.cursor = 'pointer';

... , / element className ( ):

var element = document.getElementById('someid');
element.className += " clickable";

Answer 3

Here is a very simple example, you can check it on a js fiddle. http://jsfiddle.net/umairb3/hbhvumn3/1/

p.normal::selection {
    background:#cc0000;
    color:#fff;
}

p.moz::-moz-selection {
    background:#cc0000;
    color:#fff;
}

<p class="normal moz">Hello world</p>
<p>Hello world</p>

Answer 4

CSS

<style type="text/css">
    body{
    cursor: url(mycursor.cur)
}
</style>

Javascript

document.body.style.cursor = 'wait';