ubah kursor ke penunjuk jari


234

Saya punya ini adan saya tidak tahu bahwa saya perlu memasukkan ke dalam "onmouseover" sehingga kursor akan berubah menjadi penunjuk jari seperti tautan biasa:

<a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover=""> A </a>

Saya membaca suatu tempat yang harus saya letakkan:

onmouseover="cursor: hand (a pointing hand)"

Tapi itu tidak berhasil untukku.

Ditambah lagi, saya tidak yakin apakah ini dianggap JavaScript, CSS, atau hanya HTML biasa.


itu css dan acara onmouseover adalah acara javascript.
Scott

Anda tidak memasukkan css langsung di onmouseover = "". Juga, kursor: tangan sambil mengarahkan tautan Anda harus menjadi tindakan default. Jika ini tidak terjadi, mungkin ada masalah lain yang dihadapi.
Tank



3
lol "Tangan ..... tangan yang menunjuk!" haha maaf, saya tidak bisa menolak.
Christine

Jawaban:


458
<a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover="" style="cursor: pointer;"> A </a>

Itu css.

Atau dalam style sheet:

a.menu_links { cursor: pointer; }

2
Setelah menguji ini, sepertinya perlu memiliki onmouseover = "" DAN style = cursor: pointer; ". Jika Anda hanya memiliki tag style, kursor pointer pointer akan hilang / default ke pointer standar setelah interaksi satu kali klik. Pos yang bagus, Scott, terima kasih
Nubtacular

1
@DnfD Anda hanya perlu onmouseoverjika tidak ada href definisi. Jika, seperti jangkar standar, ada adalah sebuah hrefdefinisi, onmouseovertidak perlu.
Scott

@DnFD jawaban yang diterima agak mengerikan, sungguh. itu berhasil, tetapi tidak jelas. hapus mouseover=""dan style="cursor: pointer;"biarkan class="menu_links" itu bekerja! terlepas dari apakah hrefada di sana atau tidak.
Jarett Lloyd

@Scott tidak, Anda tidak perlu yang mouseoveracara di sana. lihat komentar saya sebelumnya untuk DnfD
Jarett Lloyd

@JarettLloyd sangat tergantung pada dukungan browser dan konstruksi CSS. Ini jawaban 2012 . Banyak hal telah berubah dalam 6+ tahun.
Scott

52

Anda dapat melakukan ini dalam CSS:

a.menu_links {
    cursor: pointer;
}

Ini sebenarnya adalah perilaku default untuk tautan. Anda harus entah bagaimana menimpanya entah di mana di CSS Anda, atau tidak ada hrefatribut di sana (itu hilang dari contoh Anda).


saya tidak punya href karena saya tidak ingin meninggalkan halaman. itu tautan yang memicu fungsi JS dan jika saya memasukkan href = "#" itu mengacaukannya dan memuat ulang halaman yang salah
Dvir Levy

2
@DvirLevy - Jadi, kembalikan salah dan gunakan href="#", atau cukup gunakan CSS seperti yang saya tunjukkan ...
Joseph Silber

22

Saya suka menggunakan ini jika saya hanya memiliki satu tautan di halaman:

onMouseOver="this.style.cursor='pointer'"


7

Ini adalah sesuatu yang keren jika Anda ingin bekerja lebih keras dengan ini. di url, Anda dapat menggunakan tautan atau menyimpan png gambar dan menggunakan jalur. sebagai contoh:

url ('aset / imgs / theGoods.png');

di bawah ini adalah kode:

.cursor{
  cursor:url(http://www.icon100.com/up/3772/128/425-hand-pointer.png), auto;
}

Jadi ini hanya akan bekerja di bawah ukuran 128 X 128, lebih besar dan gambar tidak akan dimuat. Tapi secara praktis Anda bisa menggunakan gambar apa pun yang Anda inginkan! Ini akan mempertimbangkan css3 murni, dan beberapa html. yang harus Anda lakukan dalam html adalah

<div class='cursor'></div>

dan hanya di div itu, kursor itu akan ditampilkan. Jadi saya biasanya menambahkannya ke tag tubuh.


6

Saya pikir "jawaban terbaik" di atas, meskipun secara pemrograman akurat, sebenarnya tidak menjawab pertanyaan yang diajukan. pertanyaannya bertanya bagaimana cara mengubah pointer di acara mouseover. Saya melihat posting tentang bagaimana seseorang dapat memiliki kesalahan di suatu tempat tidak menjawab pertanyaan. Di jawaban yang diterima, acara mouseover kosong ( onmouseover="") dan opsi gaya, sebagai gantinya, disertakan. Bingung mengapa ini dilakukan.

Mungkin tidak ada yang salah dengan tautan penyelidik. pertimbangkan html berikut:

<a id=test_link onclick="alert('kinda neat);">Click ME!</a>

Ketika mouse pengguna melewati tautan ini, pointer tidak akan berubah menjadi tangan ... sebaliknya, pointer akan berperilaku seperti itu berada di atas teks normal. Orang mungkin tidak menginginkan ini ... jadi, penunjuk tetikus perlu diperintahkan untuk berubah.

jawaban yang dicari adalah ini (yang diposting oleh orang lain):

<a id=test_link onclick="alert('Nice!');"
       onmouseover="this.style.cursor='pointer';">Click ME!</a>

Namun, ini adalah ... mimpi buruk jika Anda memiliki banyak ini, atau menggunakan hal semacam ini di semua tempat dan memutuskan untuk membuat semacam perubahan atau mengalami bug. lebih baik membuat kelas CSS untuk itu:

a.lendhand {
  cursor: pointer;
}

kemudian:

<a class=lendhand onclick="alert('hand is lent!');">Click ME!</a>

ada banyak cara lain yang, bisa dibilang, lebih baik daripada metode ini. DIV s, BUTTON s, IMG s, dll mungkin terbukti lebih bermanfaat. Saya melihat tidak ada salahnya menggunakan <a>...</a>.

jarett.


4

Tambahkan hrefatribut untuk menjadikannya tautan yang valid & return false;di pengendali acara untuk mencegahnya menyebabkan navigasi;

<a href="#" class="menu_links" onclick="displayData(11,1,0,'A'); return false;" onmouseover=""> A </a>

(Atau membuat displayData()return false dan ..="return displayData(..)


3

Solusi melalui CSS murni sebagaimana disebutkan dalam jawaban yang ditandai sebagai yang terbaik tidak cocok untuk situasi ini.

Contoh dalam topik ini tidak memiliki atribut href statis normal, hanya memanggil JS, jadi ia tidak akan melakukan apa pun tanpa JS.

Jadi, baik untuk mengaktifkan pointer dengan JS saja. Jadi solusinya

onMouseOver="this.style.cursor='pointer'"

seperti yang disebutkan di atas (tapi saya tidak bisa berkomentar di sana) adalah yang terbaik dalam hal ini. (Tapi ya, pada umumnya, untuk tautan normal yang tidak menuntut JS, lebih baik bekerja dengan CSS murni tanpa JS.)


-1

div{cursor: pointer; color:blue}

p{cursor: text; color:red;}
<div> im Pointer  cursor </div> 
<p> im Txst cursor </p> 

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.