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

Answer 1

CSS

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

JavaScript

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

Answer 2

As Tzury Bar Yochay indicates, you can do this via both CSS and JavaScript.

CSS - Use the cursor style property, which can be any of several standard values (which is preferred) or your own cursor file (but always include a fall-back using one of the standard values). Here's an example changing the cursor of any element with the "clickable" class to the standard cursor for something you can click:

.clickable {
  cursor: pointer;
}

(This should appear in your stylesheet file, or within a style element in the head of the document [if you can't use a separate file for some reason].) You can then apply that class to relevant elements.

JavaScript - The style property on an element exposes CSS styles, so you can do this:

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

...although I generally prefer to do it by adding/removing a class name via the element's className property (which is a space-delimited list of classes for the element):

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

Answer 3

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).