cómo configurar el estilo del cursor al puntero para enlaces sin hrefs

135

Tengo muchas <a>etiquetas html sin el hrefatributo para hacer onclickllamadas javascript. Estos enlaces no tienen un estilo de puntero de cursor. Tienen cursor de estilo de texto.

¿Cómo puedo configurar el estilo del cursor para señalar los enlaces sin usar el hrefatributo?

Sé que puedo agregar href = "#". Tengo esto en muchos lugares en el documento html, y me gustaría saber cómo hacer un puntero de estilo de cursor para enlaces sin usar el hrefatributo.

javascript html css hyperlink cursor Kevin
fuente
Adiós, cuando dices enlace, ¿te refieres a "<a id="do_some_javascript"> test </a>"? ¿O es solo una etiqueta span o div que hace algunos javascript?
Alxandr

Respuestas:

211

en su archivo css agregue esto ...

a:hover {
 cursor:pointer;
}

si no tiene un archivo CSS, agréguelo al HEAD de su página HTML

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

también puede usar el atributo href = "" devolviendo falso al final de su javascript.

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

Esto es bueno por muchas razones. SEO o si las personas no tienen javascript, href = "" funcionará. p.ej

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

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

Editar: Vale la pena señalar que la respuesta de @ BalusC donde menciona :hoverno es necesaria para el caso de uso del OP. Aunque se puede agregar otro estilo con el :hoverselector.

Ross
fuente
55
Usar: hover no es necesario, y no se garantiza que funcione en enlaces sin href.
Alxandr
No puedo imaginar dónde no funcionaría. esta es una buena manera de aprender, es posible que desee tener otros comportamientos de adición similares a los enlaces con un atributo href: un cambio de fondo, subrayado, color, etc.
Ross
1
Ha pasado un tiempo desde que usé esto, pero para <IE6 podría valer la pena agregar un comentario condicional para vincular a los estilos que presentancursor: hand;
David dice que reinstale a Monica el
No necesita comentarios condicionales, solo haga .myStyle {cursor: hand; cursor: pointer;}: los navegadores más nuevos ignorarán el atributo hand ya que de todos modos no lo entienden. Además, IE6 todavía entenderá el puntero: la mano es para ie5 y menos.
easwee
Sin embargo, usar un a en sí mismo puede causar algunos problemas. Especialmente en IE porque activan OnBeforeUnload aunque agregue return false; Incluso un enlace a javascript: void (0); hace que se llame a OnBeforeUnload. Tenía un gran dolor de cabeza con este problema en el trabajo ...
Alxandr
16

Simplemente agregue esto a su estilo CSS global:

a { cursor: pointer; }

De esta manera, ya no dependerá del estilo de cursor predeterminado del navegador.

BalusC
fuente
No funciona El cursor se cambia a en textlugar de pointeren Chrome.
ZhekaKozlov
8

style = "cursor: puntero;"

mxmissile
fuente
6

Así es como cambia el cursor de una flecha a una mano cuando pasa el cursor sobre un objeto determinado object(myObject).

myObject.style.cursor = 'pointer';
Lou
fuente
1
En primer lugar, bienvenido a SO, Lou! Cuando publique / responda, asegúrese de ser lo más informativo posible y no olvide formatear sus ejemplos de código (como lo he hecho por usted).
Brian
4

Dales a todos una clase común (por ejemplo, un enlace). Luego agregue en el archivo css:

.link { cursor: pointer; }

O como sugirió @mxmissile, hágalo en línea con style = "cursor: pointer;"

Alxandr
fuente
4

cree una clase con el siguiente CSS y agréguelo a sus etiquetas con eventos onclick:

cursor:pointer;
Dan
fuente
3

Usa CSS cursor: pointersi no recuerdo mal.

Ya sea en su archivo CSS:

.link_cursor
{
    cursor: pointer;
}

Luego solo agregue el siguiente HTML a cualquier elemento que desee tener el cursor de enlace: class="link_cursor" (el método preferido).

O use CSS en línea:

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

Versión angular:

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

Esto funcionó para mí:

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