cara mengatur gaya kursor ke penunjuk untuk tautan tanpa hrefs

135

Saya memiliki banyak <a>tag html tanpa hrefatribut untuk melakukan onclickpanggilan javascript. Tautan ini tidak memiliki gaya kursor kursor. Mereka memiliki kursor gaya teks.

Bagaimana cara mengatur gaya kursor ke pointer untuk tautan tanpa menggunakan hrefatribut?

Saya tahu saya bisa menambahkan href = "#". Saya memilikinya di banyak tempat di dokumen html, dan ingin tahu cara membuat penunjuk gaya kursor untuk tautan tanpa menggunakan hrefatribut.

— kevin
sumber

Sampai jumpa, ketika Anda mengatakan tautan, maksud Anda seperti "<a id="do_some_javascript"> test </a>"? Atau itu hanya tag span atau div yang melakukan beberapa javascript?

— Alxandr

211

di file css Anda tambahkan ini ....

a:hover {
 cursor:pointer;
}

jika Anda tidak memiliki file css, tambahkan ini ke KEPALA halaman HTML Anda

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

Anda juga dapat menggunakan atribut href = "" dengan mengembalikan false di akhir javascript Anda.

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

ini bagus karena banyak alasan. SEO atau jika orang tidak memiliki javascript, href = "" akan berfungsi. misalnya

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

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

Sunting: Patut diperhatikan jawaban BalusC di mana ia menyebutkan :hovertidak perlu untuk kasus penggunaan OP. Meskipun gaya lain dapat ditambahkan dengan :hoverpemilih.

— Ross
sumber

5

Menggunakan: hover tidak perlu, dan itu tidak dijamin untuk bekerja di tautan tanpa href.

— Alxandr

saya tidak bisa membayangkan di mana itu tidak akan berhasil. ini adalah cara yang baik untuk belajar, Anda mungkin ingin memiliki perilaku tambahan lainnya yang serupa dengan tautan dengan atribut href: perubahan latar belakang, garis bawah, warna, dan lain-lain.

— Ross

1

Sudah lama sejak saya menggunakan ini, tetapi untuk <IE6 mungkin layak menambahkan komentar bersyarat untuk menautkan ke gaya menampilkancursor: hand;

— David mengatakan mengembalikan Monica

Anda tidak perlu komentar kondisional - cukup lakukan .myStyle {cursor: hand; cursor: pointer;} - browser yang lebih baru akan mengabaikan atribut tangan karena mereka toh tidak memahaminya. IE6 juga masih akan mengerti pointer - hand untuk IE5 dan di bawah.

— easwee

Menggunakan a dalam dirinya sendiri dapat menyebabkan beberapa masalah. Terutama di IE karena mereka memicu OnBeforeUnload meskipun Anda menambahkan return false; Bahkan tautan ke javascript: void (0); menyebabkan OnBeforeUnload dipanggil. Saya sakit kepala

— parah

16

Cukup tambahkan ini ke gaya CSS global Anda:

a { cursor: pointer; }

Dengan cara ini Anda tidak lagi bergantung pada gaya kursor default browser.

— BalusC
sumber

Tidak bekerja Kursor diubah menjadi textbukannya pointerdi Chrome.

— ZhekaKozlov

8

style = "cursor: pointer;"

— mxmissile
sumber

6

Ini adalah bagaimana mengubah kursor dari panah ke tangan ketika Anda mengarahkan kursor pada yang diberikan object(myObject).

myObject.style.cursor = 'pointer';

— Lou
sumber

1

Pertama, selamat datang di SO, Lou! Saat memposting / menjawab, pastikan untuk selalu informatif dan jangan lupa untuk memformat contoh kode Anda (seperti yang telah saya lakukan untuk Anda).

— Brian

4

Beri mereka semua kelas umum (misalnya tautan). Kemudian tambahkan file-css:

.link { cursor: pointer; }

Atau seperti yang disarankan @mxmissile, lakukan sesuai dengan style = "cursor: pointer;"

— Alxandr
sumber

4

buat kelas dengan CSS berikut dan tambahkan ke tag Anda dengan kejadian onclick:

cursor:pointer;

— Dan
sumber

3

Gunakan CSS cursor: pointerjika saya ingat dengan benar.

Baik di file CSS Anda:

.link_cursor
{
    cursor: pointer;
}

Kemudian tambahkan saja HTML berikut ke elemen apa pun yang Anda inginkan memiliki kursor tautan: class="link_cursor" (metode yang disukai.)

Atau gunakan CSS sebaris:

<a style="cursor: pointer;">

— Andy Shellam
sumber

1

Versi sudut:

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

— chachan
sumber

0

Ini bekerja untuk saya:

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

— BabaRick
sumber