2012-01-10 3 views
157

J'ai ce a et je ne sais pas que je dois insérer dans le « onmouseover » afin que le curseur se transforme en pointeur doigt comme un lien régulier:changement curseur pointeur doigt

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

I lire quelque part que je dois mettre:

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

Mais ça ne fonctionne pas pour moi.

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

+0

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

+0

Vous ne mettez pas css directement dans onmouseover = "". De plus, le curseur: main en survolant votre lien devrait être l'action par défaut. Si ce n'est pas le cas, il se peut qu'il y ait un autre problème. – Tank

+1

duplication possible de [comment définir le style de curseur à pointeur pour les liens sans hrefs] (http://stackoverflow.com/questions/2409836/how-to-set-cursor-style-to-pointer-for-links-without- hrefs) –

Répondre

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

Il est css.

Ou dans une feuille de style:

a.menu_links { cursor: pointer; } 
+4

merci beaucoup –

+1

juste une petite faute de frappe - 'cursor: pointer; J'ai essayé d'éditer le post, mais il m'a demandé de modifier au moins 6 caractères je pense. En plus de ça, merci! –

+2

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

37

Vous pouvez le faire en CSS:

a.menu_links { 
    cursor: pointer; 
} 

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

+0

Je n'ai pas de co href je ne veux pas quitter la page. C'est un lien qui déclenche une fonction JS et si j'insère href = "#" ça le gâche et ça recharge la mauvaise page –

+2

@DvirLevy - Donc soit retourner false et utiliser 'href =" # "', ou simplement utiliser le CSS comme je vous l'ai montré ... –

3

Ajoutez un attribut href 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 faire displayData() return false et ..="return displayData(..)

8

css écrire

a.menu_links:hover{ cursor:pointer} 
17

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

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

ici est 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, une plus grande et la charge wont image. Mais vous pouvez pratiquement utiliser n'importe quelle image que vous voulez! Cela serait considéré comme un css3 pur, et un peu de html. tout ce que vous avez à faire en html est

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

et seulement dans ce div, ce curseur va montrer. Donc, je l'ajoute généralement à l'étiquette du corps.

4

Je pense que la «meilleure réponse» ci-dessus, bien que précise par programme, ne répond pas réellement à la question posée. la question demande comment modifier 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. Baffling pourquoi cela a été fait.

Il se peut qu'il n'y ait aucun problème avec le lien du demandeur. considérer le code html suivant:

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

Quand une souris de l'utilisateur sur ce lien, le pointeur ne changera pas à une main ... à la place, le pointeur se comportera comme il est planant au-dessus du texte normal. On pourrait ne pas vouloir cela ... et ainsi, le pointeur de la souris doit être dit de changer.

la réponse est recherché pour ce (qui a été publié 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 avez beaucoup de ceux-ci, ou d'utiliser ce genre de chose partout l'endroit et décide de faire une sorte de changement ou de se heurter à un bug. mieux faire une classe CSS pour elle:

a.lendhand { 
    cursor: pointer; 
} 

alors:

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

il y a beaucoup d'autres moyens qui seraient, sans doute, mieux 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.

1

La solution via CSS pur comme mentionné dans la réponse marquée comme le meilleur n'est pas adapté à cette situation.

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

Il est donc bon d'activer le pointeur avec JS uniquement. Ainsi, la 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 les liens normaux ne demandant pas de JS, il est préférable de travailler avec du CSS pur sans JS.)

Questions connexes