web-dev-qa-db-fra.com

changer le curseur en pointeur de doigt

J'ai ceci a et je ne sais pas s'il me faut insérer dans "onmouseover" pour que le curseur se transforme en pointeur de doigt comme un lien normal:

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

J'ai lu quelque part que j'ai besoin de mettre:

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

Mais ça ne marche pas pour moi.

De plus, je ne suis pas sûr qu'il s'agisse de JavaScript, de CSS ou simplement de HTML.

htmlcssmouseevent
207
Dvir Levy
<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; }
428
Scott

Vous pouvez le faire en CSS:

a.menu_links {
    cursor: pointer;
}

C'est en fait le comportement par défaut pour les liens. Vous devez l'avoir remplacé d'une autre manière ailleurs dans votre CSS, ou il n'y a pas d'attribut href (il manque dans votre exemple).

48
Joseph Silber

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

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

en css écrire

a.menu_links:hover{ cursor:pointer}
8
Mandeep Pasbola

Voici quelque chose de cool si vous voulez faire un effort supplémentaire 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! Ce serait considérer pure CSS3, et certains HTML. tout ce que vous avez à faire en HTML est

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

et seulement dans cette div, ce curseur montrera. Donc, je l’ajoute habituellement à la balise body.

7
Michael Barreiro

Je pense que la "meilleure réponse" ci-dessus, bien que précise sur le plan programmatique, 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 est incluse à la place. Déroutant pourquoi cela a été fait.

Il n’ya peut-être rien de mal avec le lien de l'enquêteur. considérez le code HTML suivant:

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

Lorsque la souris d'un utilisateur survole ce lien, le pointeur ne se transforme pas en une main. Au lieu de cela, le pointeur se comporte comme s'il survolait du texte normal. On peut ne pas vouloir ça ... et donc, il faut dire au pointeur de la souris de changer.

la réponse recherchée est la suivante (qui a été posté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 si vous utilisez ce genre de chose un peu partout et décidez d’apporter une modification ou de rencontrer un bogue. mieux faire une classe CSS pour cela:

a.lendhand {
  cursor: pointer;
}

ensuite:

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

il existe de nombreux autres moyens qui seraient sans doute meilleurs que cette méthode. DIV s, BOUTON s, IMG s, etc. pourrait s'avérer plus utile. Je ne vois aucun mal à utiliser <a>...</a>, cependant.

jarett.

6
Jarett Lloyd

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

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

(Ou alors, displayData() renvoie false et ..="return displayData(..)

4
Alex K.

La solution via CSS pur, comme indiqué dans la réponse marquée comme étant 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’allumer le pointeur avec JS uniquement. Alors, solution

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

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

2
Martin Adámek