come impostare lo stile del cursore sul puntatore per i collegamenti senza hrif

135

Ho molti <a>tag html senza l' hrefattributo per effettuare onclickchiamate javascript. Questi collegamenti non hanno uno stile puntatore del cursore. Hanno un cursore in stile testo.

Come posso impostare lo stile del cursore come puntatore per i collegamenti senza usare l' hrefattributo?

So di poter aggiungere href = "#". Ho questo in molti punti del documento HTML e vorrei sapere come creare un puntatore di stile cursore per i collegamenti senza usare l' hrefattributo.

— Kevin
fonte

A proposito, quando dici link, intendi come "<a id="do_some_javascript"> test </a>"? O è solo un tag span o div che fa un po 'di javascript?

— Alxandr,

211

nel tuo file css aggiungi questo ....

a:hover {
 cursor:pointer;
}

se non hai un file css, aggiungilo all'HEAD della tua pagina HTML

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

inoltre puoi usare l'attributo href = "" restituendo false alla fine del tuo javascript.

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

questo è buono per molte ragioni. SEO o se le persone non hanno javascript, href = "" funzionerà. per esempio

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

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

Modifica: vale la pena notare la risposta di @ BalusC in cui menziona :hovernon è necessario per il caso d'uso del PO. Anche se è possibile aggiungere altri stili con il :hoverselettore.

— Ross
fonte

5

Utilizzo: hover non è necessario e non è garantito che funzioni sui collegamenti senza un href.

— Alxandr

non riesco a immaginare dove non funzionerebbe. questo è un buon modo per imparare, potresti voler avere altri comportamenti di aggiunta simili ai collegamenti con un attributo href: un cambio di sfondo, una sottolineatura, un colore, ecc.

— Ross

1

È passato un po 'di tempo da quando l'ho usato, ma per <IE6 potrebbe valere la pena aggiungere un commento condizionale per collegarsi agli stili che caratterizzanocursor: hand;

— David dice che ripristina Monica

Non è necessario un commento condizionale - basta fare .myStyle {cursore: mano; cursore: puntatore;} - i browser più recenti ignoreranno l'attributo della mano poiché non lo capiscono comunque. Anche IE6 comprenderà ancora il puntatore - la mano è per ie5 e sotto.

— Easwee

L'uso di una a in sé può causare alcuni problemi. Soprattutto in IE perché attivano OnBeforeUnload anche se aggiungi return false; Anche un collegamento a javascript: void (0); causa la chiamata di OnBeforeUnload. Avevo un forte mal di testa con questo problema sul lavoro ...

— Alxandr

16

Aggiungilo al tuo stile CSS globale:

a { cursor: pointer; }

In questo modo non sei più dipendente dallo stile del cursore predefinito del browser.

— BalusC
fonte

Non funziona Il cursore viene modificato in textanziché pointerin Chrome.

— Zheka Kozlov,

8

style = "cursore: pointer;"

— mxmissile
fonte

6

Ecco come cambiare il cursore da una freccia a una mano quando passi con il mouse su un dato object(myObject).

myObject.style.cursor = 'pointer';

— Lou
fonte

1

Prima di tutto, benvenuto in SO, Lou! Quando pubblichi / rispondi, assicurati di essere il più informativo possibile e non dimenticare di formattare i tuoi esempi di codice (come ho fatto per te).

— Brian

4

Dai a tutti una classe comune (ad esempio il link). Quindi aggiungi nel file css:

.link { cursor: pointer; }

O come suggerito da @mxmissile, fallo in linea con style = "pointer: pointer;"

— Alxandr
fonte

4

crea una classe con il seguente CSS e aggiungila ai tuoi tag con eventi onclick:

cursor:pointer;

— Dan
fonte

3

Usa CSS cursor: pointerse ricordo bene.

O nel tuo file CSS:

.link_cursor
{
    cursor: pointer;
}

Quindi aggiungi il seguente codice HTML a tutti gli elementi che vuoi avere il cursore di collegamento: class="link_cursor"(il metodo preferito.)

O usa CSS in linea:

<a style="cursor: pointer;">

— Andy Shellam
fonte

1

Versione angolare:

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

— chachan
fonte

0

Questo ha funzionato per me:

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

— BabaRick
fonte