Modifier le type de curseur lorsque la souris survole un texte sélectionné en utilisant HTML/Javascript

Question

J'ai besoin de changer le type de curseur lorsque la souris survole un texte sélectionné.

Vous trouverez ici une image explicative:

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

Dans cet exemple, l'utilisateur doit faire glisser du texte à la zone de texte. Comme le pointeur traditionnel n'est pas intuitif, j'aimerais utiliser le pointeur "move" (curseur: pointeur). J'ai fait cette image avec photoshop. Est-ce que quelqu'un sait comment le faire pour de vrai en HTML/CSS/JAVASCRIPT?

Answer 1

Selection styles (non pris en charge dans IE) sont la seule chose qui vient à l'esprit pour obtenir l'effet désiré:

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

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

... mais, bien que le texte devient rouge (ce qui est juste un contrôle), le curseur ne semble pas changer dans les deux Safari ou Firefox. Toutefois, si vous enveloppez le texte dans un élément HTML et appliquez le style à l'élément (via un ID ou une classe), tout fonctionne correctement.

Vous pouvez contourner ce problème en utilisant la méthode JavaScript window.getSelection() pour envelopper le texte sélectionné dans un élément DOM, puis le style de cet élément DOM. Je ne suis pas sûr que ce soit possible (et ça pourrait être un peu hacky).

Answer 2

CSS

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

JavaScript

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

Answer 3

Comme Tzury Bar Yochay indique, vous pouvez le faire via à la fois CSS et JavaScript.

CSS - Utilisez la propriété de style cursor, qui peut être l'une des several standard values (qui est préféré) ou votre propre fichier curseur (mais toujours inclure une chute en arrière en utilisant l'une des valeurs standards). Voici un exemple en changeant le curseur d'un élément avec le « cliquable » classe au curseur standard pour quelque chose que vous pouvez cliquer sur:

.clickable { 
    cursor: pointer; 
} 

(Cela devrait apparaître dans votre fichier de feuille de style, ou dans un élément style dans le head de le document [si vous ne pouvez pas utiliser un fichier séparé pour une raison quelconque].) Vous pouvez ensuite appliquer cette classe aux éléments pertinents.

JavaScript - La style propriété sur un élément CSS styles expose, de sorte que vous pouvez le faire:

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

... bien que je préfère généralement le faire par l'ajout/suppression d'un nom de classe via le propriété de l'élément className (qui est une liste limitée des classes pour l'élément):

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

Answer 4

Voici un exemple très simple que vous pouvez vérifier sur 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>