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.

— Kevin
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

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
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
source

Ça ne marche pas. Le curseur est changé au textlieu de pointerChrome.

— ZhekaKozlov

8

style = "curseur: pointeur;"

— mxmissile
source

6

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

myObject.style.cursor = 'pointer';

— Lou
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
source

4

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

cursor:pointer;

— Dan
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
source

1

Version angulaire:

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

— chachan
source

0

Cela a fonctionné pour moi:

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

— BabaRick
source