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.


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

Jawaban:


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.


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.


Tidak bekerja Kursor diubah menjadi textbukannya pointerdi Chrome.
ZhekaKozlov


6

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

myObject.style.cursor = 'pointer';

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;"


4

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

cursor:pointer;

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;">

1

Versi sudut:

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

0

Ini bekerja untuk saya:

<a onClick={this.openPopupbox} style={{cursor: 'pointer'}}>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.