jak ustawić styl kursora na wskaźnik dla linków bez hrefów

135

Mam wiele <a>tagów html bez hrefatrybutu do wykonywania onclickwywołań javascript. Te łącza nie mają stylu wskaźnika kursora. Mają kursor w stylu tekstu.

Jak ustawić styl kursora na wskaźnik dla łączy bez używania hrefatrybutu?

Wiem, że mogę dodać href = "#". Mam to w wielu miejscach w dokumencie html i chciałbym wiedzieć, jak utworzyć wskaźnik stylu kursora dla linków bez używania hrefatrybutu.

javascript html css hyperlink cursor kevin
źródło
A propos, kiedy mówisz link, masz na myśli „<a id="do_some_javascript"> test </a>”? A może to tylko tag span lub div, który wykonuje jakiś javascript?
Alxandr

Odpowiedzi:

211

w swoim pliku css dodaj to ....

a:hover {
 cursor:pointer;
}

jeśli nie masz pliku css, dodaj go do HEAD swojej strony HTML

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

możesz również użyć atrybutu href = "", zwracając false na końcu kodu JavaScript.

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

jest to dobre z wielu powodów. SEO lub jeśli ludzie nie mają javascript, href = "" zadziała. na przykład

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

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

Edycja: Warto zauważyć, że odpowiedź @ BalusC, w której wspomina, :hovernie jest konieczna w przypadku użycia OP. Chociaż inny styl można dodać za pomocą :hoverselektora.

Ross
źródło
5
Używanie: hover nie jest konieczne i nie gwarantuje się działania na linkach bez href.
Alxandr
nie mogę sobie wyobrazić, gdzie to by nie zadziałało. to dobry sposób na naukę, możesz chcieć mieć inne zachowania związane z dodawaniem, podobne do linków z atrybutem href: zmiana tła, podkreślenie, kolor itp.
Ross
1
Minęło trochę czasu, odkąd tego użyłem, ale w przypadku <IE6 może warto dodać warunkowy komentarz, aby odsyłacz do stylów, w których występującursor: hand;
David mówi, że przywróć Monikę
Nie potrzebujesz komentarza warunkowego - po prostu zrób .myStyle {kursor: ręka; kursor: wskaźnik;} - nowsze przeglądarki ignorują atrybut ręki, ponieważ i tak go nie rozumieją. Również IE6 nadal będzie rozumiał wskaźnik - ręka jest dla IE5 i niższych.
łagodne
Używanie samego a może jednak powodować pewne problemy. Zwłaszcza w IE, ponieważ wyzwalają OnBeforeUnload, nawet jeśli dodajesz return false; Nawet link do javascript: void (0); powoduje wywołanie OnBeforeUnload. Miałem poważny ból głowy z tym problemem w pracy ...
Alxandr 9/10
16

Po prostu dodaj to do swojego globalnego stylu CSS:

a { cursor: pointer; }

W ten sposób nie jesteś już zależny od domyślnego stylu kursora przeglądarki.

BalusC
źródło
Nie działa. Kursor zmienia się na textzamiast pointerw Chrome.
ZhekaKozlov
8

style = "kursor: wskaźnik;"

mxmissile
źródło
6

W ten sposób zmienia się kursor ze strzałki na rękę po najechaniu na dany object(myObject).

myObject.style.cursor = 'pointer';
Lou
źródło
1
Po pierwsze, witaj w SO, Lou! Pisząc / odpowiadając, upewnij się, że podasz jak najwięcej informacji i nie zapomnij sformatować przykładów kodu (tak jak to zrobiłem dla Ciebie).
Brian
4

Daj im wszystkim wspólną klasę (na przykład link). Następnie dodaj plik css:

.link { cursor: pointer; }

Lub, jak zasugerował @mxmissile, zrób to w linii ze style = "kursor: wskaźnik;"

Alxandr
źródło
4

utwórz klasę za pomocą następującego kodu CSS i dodaj ją do swoich tagów za pomocą zdarzeń onclick:

cursor:pointer;
Dan
źródło
3

Użyj CSS, cursor: pointerjeśli dobrze pamiętam.

W pliku CSS:

.link_cursor
{
    cursor: pointer;
}

Następnie po prostu dodaj następujący kod HTML do dowolnych elementów, które mają mieć kursor łącza: class="link_cursor" (preferowana metoda).

Lub użyj wbudowanego CSS:

<a style="cursor: pointer;">
Andy Shellam
źródło
1

Wersja kątowa:

<a (click)="action(); $event.preventDefault()" href="#">Action</a>
chachan
źródło
0

To zadziałało dla mnie:

<a onClick={this.openPopupbox} style={{cursor: 'pointer'}}>
BabaRick
źródło