Ubah kursor mouse pada mouse menjadi gaya seperti jangkar

110

Jika saya mengarahkan mouse ke divatas kursor mouse akan berubah menjadi kursor seperti itu di jangkar HTML.

Bagaimana saya bisa melakukan ini? Apakah saya memerlukan Javascript atau hanya mungkin dengan CSS?

javascript css mouse dengan tangkas
sumber

Jawaban:

222

Dengan asumsi Anda divmemiliki id="myDiv", tambahkan yang berikut ini ke CSS Anda. The cursor: pointermenetapkan bahwa kursor harus ikon tangan yang sama yang digunakan untuk jangkar (hyperlink):

CSS untuk Ditambahkan

#myDiv
{
    cursor: pointer;
}

Anda cukup menambahkan gaya kursor ke divHTML Anda seperti ini:

<div style="cursor: pointer">

</div>

EDIT:

Jika Anda bertekad untuk menggunakan jQuery untuk ini, tambahkan baris berikut ke your $(document).ready()or body onload: (ganti myClassdengan kelas apa pun dari semua bagian Anda div)

$('.myClass').css('cursor', 'pointer');
Devin Burke
sumber
Saya ingin melakukan ini dengan jquery bukan css
shible
7
@guru: Tidak perlu membuat skrip. Yang perlu Anda lakukan hanyalah menambahkan style="cursor: pointer"ke divHTML Anda. Saya akan mengedit jawaban saya dengan sebuah contoh.
Devin Burke
Ada lima divisi dengan kelas yang sama, saya tidak bisa menambahkan ke semua ini "style =" cursor: pointer "
shible
@guru, jika semua div memiliki kelas yang sama, maka Anda sebenarnya dapat menambahkan "cursor: pointer" ke aturan CSS untuk kelas tersebut di file CSS laman Anda
serang
1
jika masalahnya adalah salah satu penargetan, maka seperti yang sudah ditanyakan Justin, dan seperti yang selalu ditanyakan semua orang, POSKAN KODE agar kami dapat membantu Anda melampirkannya
Sinetheta
24

Jika Anda ingin melakukan ini di jQuery alih-alih CSS, pada dasarnya Anda mengikuti proses yang sama.

Dengan asumsi Anda memiliki beberapa <div id="target"></div>, Anda dapat menggunakan kode berikut:

$("#target").hover(function() {
    $(this).css('cursor','pointer');
}, function() {
    $(this).css('cursor','auto');
});

dan itu harus dilakukan.

Ryan Atallah
sumber
3
Hal ini berlebihan karena kursor untuk divadalah hanya terlihat ketika mouse di atas itu. Tidak ada alasan untuk menghapusnya setelah pengguna mengarahkan kursor ke luar karena kursor tidak akan terlihat pada saat itu.
Devin Burke
2
Sementara pertanyaannya ditanyakan secara sempit (tentang DIV), jawaban ini berlaku secara luas. Berguna untuk elemen HTML apa pun seperti tabel, <p>, tombol, dll. Itu sebabnya saya memberi +1.
PeteH
10

Anda sebenarnya tidak membutuhkan jQuery, hanya CSS. Misalnya, inilah beberapa HTML:

<div class="special"></div>

Dan inilah CSS-nya:

.special
{
    cursor: pointer;
}
menyerang
sumber
6

Ini akan

#myDiv
{
    cursor: pointer;
}
Sinetheta
sumber
0

Saya pikir :hoverhilang dalam jawaban di atas. Jadi berikut ini akan melakukan yang diperlukan. (Jika css diperlukan)

#myDiv:hover
{
    cursor: pointer;
}
menjadi_hati
sumber
Bekerja untuk saya tanpa: hover, dan mungkin lebih banyak lagi karena jawabannya memiliki banyak suara positif. Apakah kamu sudah mencobanya?
dading84
ya, abaikan jawaban ini
being_ethereal