changer le curseur en pointeur de doigt


234

J'ai ceci aet je ne sais pas que je dois insérer dans le "onmouseover" pour que le curseur se transforme en pointeur de doigt comme un lien régulier:

<a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover=""> A </a>

J'ai lu quelque part que je dois mettre:

onmouseover="cursor: hand (a pointing hand)"

Mais ça ne marche pas pour moi.

De plus, je ne sais pas si cela est considéré comme JavaScript, CSS ou tout simplement HTML.


c'est css et l'événement onmouseover est un événement javascript.
Scott

Vous ne mettez pas css directement dans onmouseover = "". En outre, curseur: main tout en survolant votre lien devrait être l'action par défaut. Si cela ne se produit pas, il peut y avoir un autre problème à portée de main.
Tank



3
lol "Main ..... une main pointée!" haha désolé, je n'ai pas pu résister.
Christine

Réponses:


458
<a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover="" style="cursor: pointer;"> A </a>

C'est CSS.

Ou dans une feuille de style:

a.menu_links { cursor: pointer; }

2
Après avoir testé cela, il semble qu'il soit nécessaire d'avoir à la fois onmouseover = "" AND style = cursor: pointer; ". Si vous n'avez que la balise de style, le curseur du pointeur disparaîtra / sera par défaut le pointeur standard après une interaction avec un seul clic. Bon post Scott, merci.
Nubtacular

1
@DnfD vous n'avez besoin que de onmouseovers'il n'y a pas de href définition. Si, comme une ancre standard, il existe une hrefdéfinition, la onmouseovern'est pas nécessaire.
Scott

@DnfD la réponse acceptée est vraiment horrible. il fait le travail, mais n'est pas clair. retirer mouseover=""et style="cursor: pointer;"laisser class="menu_links" cela fonctionnera! indépendamment du fait qu'il hrefy soit ou non.
Jarett Lloyd

@Scott non, vous n'avez pas besoin de l' mouseoverévénement là-dedans. voir mon commentaire précédent à DnfD
Jarett Lloyd

@JarettLloyd dépend beaucoup du support du navigateur et de la construction CSS. Ceci est une réponse de 2012 . Les choses ont changé en 6+ ans.
Scott

52

Vous pouvez le faire en CSS:

a.menu_links {
    cursor: pointer;
}

Il s'agit en fait du comportement par défaut des liens. Vous devez soit l'avoir outrepassé ailleurs dans votre CSS, soit il n'y a pas d' hrefattribut (il manque dans votre exemple).


je n'ai pas de coz href je ne veux pas quitter la page. c'est un lien qui déclenche une fonction JS et si j'insère href = "#" il le gâche et il recharge la mauvaise page
Dvir Levy

2
@DvirLevy - Donc, soit retournez false et utilisez href="#", ou utilisez simplement le CSS comme je vous l'ai montré ...
Joseph Silber

22

J'aime utiliser celui-ci si je n'ai qu'un seul lien sur la page:

onMouseOver="this.style.cursor='pointer'"


7

Voici quelque chose de cool si vous voulez aller plus loin avec cela. dans l'url, vous pouvez utiliser un lien ou enregistrer une image png et utiliser le chemin. par exemple:

url ('assets / imgs / theGoods.png');

ci-dessous est le code:

.cursor{
  cursor:url(http://www.icon100.com/up/3772/128/425-hand-pointer.png), auto;
}

Donc, cela ne fonctionnera que sous la taille 128 X 128, plus grande et l'image ne se chargera pas. Mais vous pouvez pratiquement utiliser n'importe quelle image de votre choix! Ce serait considérer du css3 pur, et du html. tout ce que vous avez à faire en html est

<div class='cursor'></div>

et seulement dans cette div, ce curseur apparaîtra. Je l'ajoute donc généralement à la balise body.


6

Je pense que la "meilleure réponse" ci-dessus, quoique programmatique précise, ne répond pas réellement à la question posée. la question demande comment changer le pointeur dans l'événement mouseover. Je vois des messages sur la façon dont on peut avoir une erreur quelque part ne répond pas à la question. Dans la réponse acceptée, l'événement mouseover est vide ( onmouseover="") et l'option de style, à la place, est incluse. Déconcertant pourquoi cela a été fait.

Il n'y a peut-être rien de mal avec le lien du demandeur. considérez le html suivant:

<a id=test_link onclick="alert('kinda neat);">Click ME!</a>

Lorsqu'un utilisateur passe la souris sur ce lien, le pointeur ne se transforme pas en main ... à la place, le pointeur se comportera comme s'il planait sur du texte normal. On pourrait ne pas vouloir cela ... et donc, le pointeur de la souris doit être dit de changer.

la réponse recherchée est la suivante (qui a été publiée par un autre):

<a id=test_link onclick="alert('Nice!');"
       onmouseover="this.style.cursor='pointer';">Click ME!</a>

Cependant, c'est ... un cauchemar si vous en avez beaucoup, ou utilisez ce genre de chose partout et décidez de faire une sorte de changement ou de rencontrer un bug. mieux faire une classe CSS pour cela:

a.lendhand {
  cursor: pointer;
}

puis:

<a class=lendhand onclick="alert('hand is lent!');">Click ME!</a>

il existe de nombreuses autres façons qui seraient sans doute meilleures que cette méthode. Les DIV , les BOUTONS , les IMG , etc. pourraient s'avérer plus utiles. <a>...</a>Cependant, je ne vois aucun mal à l'utiliser .

Jarett.


4

Ajoutez un hrefattribut pour en faire un lien valide & return false;dans le gestionnaire d'événements pour l'empêcher de provoquer une navigation;

<a href="#" class="menu_links" onclick="displayData(11,1,0,'A'); return false;" onmouseover=""> A </a>

(Ou faites un displayData()retour faux et ..="return displayData(..)


3

La solution via CSS pur comme mentionné dans la réponse marquée comme la meilleure ne convient pas à cette situation.

L'exemple de cette rubrique n'a pas d'attribut href statique normal, il appelle uniquement JS, il ne fera donc rien sans JS.

Il est donc bon d'activer le pointeur avec JS uniquement. Donc, la solution

onMouseOver="this.style.cursor='pointer'"

comme mentionné ci-dessus (mais je ne peux pas y commenter) est le meilleur dans ce cas. (Mais oui, généralement, pour les liens normaux ne demandant pas JS, il est préférable de travailler avec du CSS pur sans JS.)


-1

div{cursor: pointer; color:blue}

p{cursor: text; color:red;}
<div> im Pointer  cursor </div> 
<p> im Txst cursor </p> 

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.