comment définir le style du curseur sur le pointeur pour les liens sans hrefs

135

J'ai beaucoup de <a>balises html sans l' hrefattribut pour faire des onclickappels javascript. Ces liens n'ont pas de style pointeur de curseur. Ils ont un curseur de style de texte.

Comment puis-je définir le style du curseur comme pointeur pour les liens sans utiliser le href attribut?

Je sais que je peux ajouter href = "#". Je l'ai à de nombreux endroits dans le document html et j'aimerais savoir comment créer un pointeur de style curseur pour les liens sans utiliser l' hrefattribut.

javascript html css hyperlink cursor Kevin
la source
Au fait, quand vous dites lien, voulez-vous dire "<a id="do_some_javascript"> test </a>"? Ou est-ce juste une balise span ou div qui fait du javascript?
Alxandr

Réponses:

211

dans votre fichier css, ajoutez ceci ...

a:hover {
 cursor:pointer;
}

si vous n'avez pas de fichier css, ajoutez-le à la tête de votre page HTML

<style type="text/css">
 a:hover {
  cursor:pointer;
 }
</style>

vous pouvez également utiliser l'attribut href = "" en renvoyant false à la fin de votre javascript.

<a href="" onclick="doSomething(); return false;">a link</a>

c'est bon pour de nombreuses raisons. SEO ou si les gens n'ont pas de javascript, le href = "" fonctionnera. par exemple

<a href="nojavascriptpage.html" onclick="doSomething(); return false;">a link</a>

@voir http://www.alistapart.com/articles/behavioralseparation

Edit: Il convient de noter la réponse de @ BalusC où il mentionne que ce :hovern'est pas nécessaire pour le cas d'utilisation de l'OP. Bien que d'autres styles puissent être ajoutés avec le :hoversélecteur.

Ross
la source
5
L'utilisation de: hover n'est pas nécessaire et il n'est pas garanti de fonctionner sur des liens sans href.
Alxandr
je ne peux pas imaginer où cela ne fonctionnerait pas. c'est un bon moyen d'apprendre, vous voudrez peut-être avoir d'autres comportements d'ajout similaires aux liens avec un attribut href: un changement d'arrière-plan, un soulignement, une couleur, et al.
Ross
1
Cela fait un moment que je n'ai pas utilisé cela, mais pour <IE6, il pourrait être utile d'ajouter un commentaire conditionnel pour créer un lien vers les styles mettant en vedettecursor: hand;
David dit de réintégrer Monica
Vous n'avez pas besoin de commentaire conditionnel - faites simplement .myStyle {curseur: main; curseur: pointeur;} - les nouveaux navigateurs ignoreront l'attribut hand puisqu'ils ne le comprennent pas de toute façon. Aussi IE6 comprendra toujours le pointeur - la main est pour ie5 et ci-dessous.
easwee
L'utilisation d'un a en soi peut cependant causer des problèmes. Surtout dans IE car ils déclenchent OnBeforeUnload même si vous ajoutez return false; Même un lien vers javascript: void (0); provoque l'appel d'OnBeforeUnload. J'ai eu un gros mal de tête avec ce problème au travail ...
Alxandr
16

Ajoutez simplement ceci à votre style CSS global:

a { cursor: pointer; }

De cette façon, vous ne dépendez plus du style de curseur par défaut du navigateur.

BalusC
la source
Ça ne marche pas. Le curseur est changé au textlieu de pointerChrome.
ZhekaKozlov
8

style = "curseur: pointeur;"

mxmissile
la source
6

Voici comment changer le curseur d'une flèche à une main lorsque vous objectsurvolez un (myObject) donné.

myObject.style.cursor = 'pointer';
Lou
la source
1
Tout d'abord, bienvenue à SO, Lou! Lorsque vous postez / répondez, assurez-vous d'être aussi informatif que possible et n'oubliez pas de formater vos exemples de code (comme je l'ai fait pour vous).
Brian
4

Donnez-leur à tous une classe commune (par exemple un lien). Ajoutez ensuite le fichier css:

.link { cursor: pointer; }

Ou comme @mxmissile l'a suggéré, faites-le en ligne avec style = "cursor: pointer;"

Alxandr
la source
4

créez une classe avec le CSS suivant et ajoutez-la à vos balises avec les événements onclick:

cursor:pointer;
Dan
la source
3

Utilisez CSS cursor: pointersi je me souviens bien.

Soit dans votre fichier CSS:

.link_cursor
{
    cursor: pointer;
}

Ensuite, ajoutez simplement le code HTML suivant à tous les éléments que vous souhaitez avoir le curseur de lien: class="link_cursor"(la méthode préférée.)

Ou utilisez le CSS en ligne:

<a style="cursor: pointer;">
Andy Shellam
la source
1

Version angulaire:

<a (click)="action(); $event.preventDefault()" href="#">Action</a>
chachan
la source
0

Cela a fonctionné pour moi:

<a onClick={this.openPopupbox} style={{cursor: 'pointer'}}>
BabaRick
la source