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.

— 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

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