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.

— 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

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