Buat kursor membantu ketika pengguna mengarahkan kursor ke item daftar


1959

Saya punya daftar, dan saya punya penangan klik untuk barang-barangnya:

<ul>
  <li>foo</li>
  <li>goo</li>
</ul>

Bagaimana saya bisa mengubah pointer mouse menjadi pointer tangan (seperti ketika melayang di atas tombol)? Sekarang pointer berubah menjadi pointer pemilihan teks ketika saya mengarahkan kursor ke daftar item.


52
FYI, saya mengulang pertanyaan Anda dengan menghapus "jquery" dan menambahkan "css" agar lebih akurat mencerminkan sifat pertanyaan Anda dan jawabannya.
Christopher Parker

4
Daftar referensi yang baik untuk mengubah kursor ke tangan dan ikon lain yang tersedia di css. javascriptkit.com/dhtmltutors/csscursors.shtml
Neil

3
Jika ada handler klik yang ditambahkan dengan JavaScript juga css untuk pointer mouse harus ditambahkan dengan JavaScript. Jadi pengguna tidak berpikir dia bisa mengklik di mana itu tidak mungkin. Saya menambahkan jawaban yang sesuai untuk ini.
Christoph

Apakah Anda mencobacursor: grab
devssh

Jawaban:


3253

Mengingat berlalunya waktu, seperti yang telah disebutkan orang, Anda sekarang dapat dengan aman menggunakan:

li { cursor: pointer; }

212
Perlu dicatat bahwa hanya melakukan cursor: pointeritu cukup baik untuk semua hal di atas IE 5.5: quirksmode.org/css/cursor.html
ripper234

19
Lucu bagaimana pointer! = Kursor dan tangan! = Pointer, menambahkan lebih banyak kebingungan. :)
Henrik Erlandsson

22
Dari catatan, quirksmode.org/css/user-interface/cursor.html#note (direferensikan dalam komentar sebelumnya) menyatakan bahwa tangan harus datang setelah pointer. Saya sarankan menggunakan pointer saja - IE 5.5 lebih mati dari IE 6.
Iiridayn

2
@ EdwardBlack dulu diperlukan untuk browser aneh yang tidak memenuhi standar, jawabannya telah diperbarui sejak lama untuk mencerminkan cara baru yang hanya pointerpertanyaan ini sudah lebih dari 5 tahun btw.
Aren

Memang. Bahkan jika Anda menjalankan IE dalam mode kompatibilitas IE5, cursor:pointermasih berfungsi. Jadi jika ada alasan untuk menggunakan cursor:hand, tidak ada lagi.
Tn. Lister

336

Gunakan untuk li:

li:hover {
    cursor: pointer;
}

Lihat lebih banyak properti kursor dengan contoh-contoh setelah menjalankan opsi snippet:

Animasi yang menampilkan kursor yang melayang di atas div di setiap kelas

.auto          { cursor: auto; }
.default       { cursor: default; }
.none          { cursor: none; }
.context-menu  { cursor: context-menu; }
.help          { cursor: help; }
.pointer       { cursor: pointer; }
.progress      { cursor: progress; }
.wait          { cursor: wait; }
.cell          { cursor: cell; }
.crosshair     { cursor: crosshair; }
.text          { cursor: text; }
.vertical-text { cursor: vertical-text; }
.alias         { cursor: alias; }
.copy          { cursor: copy; }
.move          { cursor: move; }
.no-drop       { cursor: no-drop; }
.not-allowed   { cursor: not-allowed; }
.all-scroll    { cursor: all-scroll; }
.col-resize    { cursor: col-resize; }
.row-resize    { cursor: row-resize; }
.n-resize      { cursor: n-resize; }
.e-resize      { cursor: e-resize; }
.s-resize      { cursor: s-resize; }
.w-resize      { cursor: w-resize; }
.ns-resize     { cursor: ns-resize; }
.ew-resize     { cursor: ew-resize; }
.ne-resize     { cursor: ne-resize; }
.nw-resize     { cursor: nw-resize; }
.se-resize     { cursor: se-resize; }
.sw-resize     { cursor: sw-resize; }
.nesw-resize   { cursor: nesw-resize; }
.nwse-resize   { cursor: nwse-resize; }

.cursors > div {
    float: left;
    box-sizing: border-box;
    background: #f2f2f2;
    border:1px solid #ccc;
    width: 20%;
    padding: 10px 2px;
    text-align: center;
    white-space: nowrap;
    &:nth-child(even) {
       background: #eee;
    }
    &:hover {
       opacity: 0.25
    }
}
<h1>Example of cursor</h1>

<div class="cursors">
    <div class="auto">auto</div>
    <div class="default">default</div>
    <div class="none">none</div>
    <div class="context-menu">context-menu</div>
    <div class="help">help</div>
    <div class="pointer">pointer</div>
    <div class="progress">progress</div>
    <div class="wait">wait</div>
    <div class="cell">cell</div>
    <div class="crosshair">crosshair</div>
    <div class="text">text</div>
    <div class="vertical-text">vertical-text</div>
    <div class="alias">alias</div>
    <div class="copy">copy</div>
    <div class="move">move</div>
    <div class="no-drop">no-drop</div>
    <div class="not-allowed">not-allowed</div>
    <div class="all-scroll">all-scroll</div>
    <div class="col-resize">col-resize</div>
    <div class="row-resize">row-resize</div>
    <div class="n-resize">n-resize</div>
    <div class="s-resize">s-resize</div>
    <div class="e-resize">e-resize</div>
    <div class="w-resize">w-resize</div>
    <div class="ns-resize">ns-resize</div>
    <div class="ew-resize">ew-resize</div>
    <div class="ne-resize">ne-resize</div>
    <div class="nw-resize">nw-resize</div>
    <div class="se-resize">se-resize</div>
    <div class="sw-resize">sw-resize</div>
    <div class="nesw-resize">nesw-resize</div>
    <div class="nwse-resize">nwse-resize</div>
</div>


Di luar topik, Menggunakan perangkat lunak mana yang Anda buat animasi gif itu? Menunggu .. @ Santosh Khalse
fWd82

3
@ fWd82 periksa ShareX - rekam gif
Tersembunyi

Saya merasa ini adalah pengingat kursor yang berguna dan menambahkan kode sebagai alat. Berikut tautan ke kode di atas: spragucm.com/web-css-cursor-pointers
Chris Sprague

1
Animasi yang luar biasa! @ fWd82 - Mengintip juga bagus untuk merekam gif area layar Anda. github.com/phw/peek
Autumn Leonard

1
ha - ini luar biasa! terima kasih @ santosh-khalse
sufinawaz

156

Anda tidak memerlukan jQuery untuk ini, cukup gunakan konten CSS berikut:

li {cursor: pointer}

Dan voila! Berguna.


1
Berguna? Hmm ... Saya melihat apa yang Anda lakukan di sana, @ denis-alpheus-cahuk
osiris

78

Menggunakan:

li:hover {
    cursor: pointer;
}

Nilai valid lainnya (yang handmerupakan tidak ) untuk spesifikasi HTML saat ini dapat dilihat di sini .


13
Saya tidak mengerti apa gunanya :hoverkelas pseudo dalam kasus ini. Apakah ada keuntungan untuk menentukan kursor yang berbeda ketika mouse tidak membawa elemen? Saya juga membaca bahwa li:hovertidak berfungsi di IE6.
Robert

1
Saya kira :hoverhanya untuk spesifisitas, @Robert. Saya tidak dapat menguji dukungan dalam versi MSIE apa pun, maaf, tetapi itu tidak akan mengejutkan saya jika tidak berhasil! : P
Alastair

mengapa ada handdi jawaban atas, meskipun tidak berfungsi?
Hitam

1
@ EdwardBlack cursor: handsudah usang dan tidak ada dalam spesifikasi css. itu seperti dari era IE5-6. gunakan saja pointer.
northamerican

43

Menggunakan

cursor: pointer;
cursor: hand;

jika Anda ingin memiliki hasil crossbrowser!


7
Ini adalah 2018, dan kursor: tangan tidak lagi diperlukan untuk pengembangan lintas-browser, kan?
Haramoz

41

CSS:

.auto            { cursor: auto; }
.default         { cursor: default; }
.none            { cursor: none; }
.context-menu    { cursor: context-menu; }
.help            { cursor: help; }
.pointer         { cursor: pointer; }
.progress        { cursor: progress; }
.wait            { cursor: wait; }
.cell            { cursor: cell; }
.crosshair       { cursor: crosshair; }
.text            { cursor: text; }
.vertical-text   { cursor: vertical-text; }
.alias           { cursor: alias; }
.copy            { cursor: copy; }
.move            { cursor: move; }
.no-drop         { cursor: no-drop; }
.not-allowed     { cursor: not-allowed; }
.all-scroll      { cursor: all-scroll; }
.col-resize      { cursor: col-resize; }
.row-resize      { cursor: row-resize; }
.n-resize        { cursor: n-resize; }
.e-resize        { cursor: e-resize; }
.s-resize        { cursor: s-resize; }
.w-resize        { cursor: w-resize; }
.ns-resize       { cursor: ns-resize; }
.ew-resize       { cursor: ew-resize; }
.ne-resize       { cursor: ne-resize; }
.nw-resize       { cursor: nw-resize; }
.se-resize       { cursor: se-resize; }
.sw-resize       { cursor: sw-resize; }
.nesw-resize     { cursor: nesw-resize; }
.nwse-resize     { cursor: nwse-resize; }

Anda juga dapat membuat kursor menjadi gambar:

.img-cur {
   cursor: url(images/cursor.png), auto;
}

7
Itu bukan jawaban untuk pertanyaan itu.

9
ini mungkin bukan jawaban langsung untuk pertanyaan tetapi ini adalah pedoman yang sangat bagus. terima kasih ngomong-ngomong!
chitcharonko

20

Saya pikir akan pintar jika hanya menampilkan kursor tangan / kursor ketika JavaScript tersedia. Jadi orang tidak akan merasa mereka dapat mengklik sesuatu yang tidak dapat diklik.

Untuk mencapai itu Anda bisa menggunakan jQuery libary JavaScript untuk menambahkan CSS ke elemen seperti itu

$("li").css({"cursor":"pointer"});

Atau rantai langsung ke penangan klik.

Atau ketika modernizer dalam kombinasi dengan <html class="no-js">digunakan, CSS akan terlihat seperti ini:

.js li { cursor: pointer; }


17

Hanya untuk kelengkapan:

cursor: -webkit-grab;

Ini juga memberi tangan, tangan yang Anda kenal saat menggerakkan tampilan gambar.

Ini sangat berguna jika Anda ingin meniru perilaku ambil menggunakan jQuery dan mousedown.

Masukkan deskripsi gambar di sini


16

Untuk browser lintas lengkap, gunakan:

cursor: pointer;
cursor: hand;

12

Cukup lakukan sesuatu seperti ini:

li { 
  cursor: pointer;
}

Saya menerapkannya pada kode Anda untuk melihat cara kerjanya:

li {
  cursor: pointer;
}
<ul>
  <li>foo</li>
  <li>goo</li>
</ul>

Catatan: Juga jangan lupa Anda dapat memiliki kursor tangan dengan kursor khusus, Anda dapat membuat ikon tangan favorit seperti ini misalnya:

div {
  display: block;
  width: 400px;
  height: 400px;
  background: red;
  cursor: url(http://findicons.com/files/icons/1840/free_style/128/hand.png) 4 12, auto;
}
<div>
</div>


11

Untuk dapat membuat apa pun mendapatkan perawatan "mousechange", Anda dapat menambahkan kelas CSS:

.mousechange:hover {
  cursor: pointer;
}
<span class="mousechange">Some text here</span>

Saya tidak akan mengatakan untuk menggunakan cursor:handkarena itu hanya berlaku untuk Internet Explorer 5.5 dan di bawah, dan Internet Explorer 6 datang dengan Windows XP (2002). Orang hanya akan mendapatkan petunjuk untuk memutakhirkan ketika browser mereka berhenti bekerja untuk mereka. Selain itu, di Visual Studio, itu akan merah menggarisbawahi entri itu. Ini memberitahu saya:

Validasi (CSS 3.0): "hand" bukan nilai yang valid untuk properti "cursor"



9

Semua respons lain menyarankan menggunakan pointer CSS standar, namun, ada dua metode:

  1. Terapkan properti CSS cursor:pointer;ke elemen. (Ini adalah gaya default ketika kursor melayang di atas tombol.)

  2. Terapkan properti CSS cursor:url(pointer.png);menggunakan grafik khusus untuk pointer Anda. Ini mungkin lebih diinginkan jika Anda ingin memastikan bahwa pengalaman pengguna identik pada semua platform (alih-alih mengizinkan browser / OS memutuskan seperti apa kursor kursor Anda seharusnya). Perhatikan bahwa opsi mundur dapat ditambahkan jika gambar tidak ditemukan, termasuk url sekunder atau salah satu opsi lainnya yaitucursor:url(pointer.png,fallback.png,pointer);

Tentu saja ini dapat diterapkan ke item daftar dengan cara ini li{cursor:pointer;}, sebagai kelas .class{cursor:pointer;}, atau sebagai nilai untuk atribut gaya setiap elemen style="cursor:pointer;".


8

Menggunakan:

ul li:hover{
   cursor: pointer;
}

Untuk acara mouse lainnya, periksa properti kursor CSS .


Jawaban rangkap. Seharusnya menambahkan tautan sebagai sunting ke jawaban lain bertanggal 21 Desember 2014 oleh user3776645.
vapcguy

5

Anda dapat menggunakan salah satu dari yang berikut:

li:hover
{
 cursor: pointer;
}

atau

li
{
 cursor: pointer;
}

Contoh kerja 1:

    li:hover
    {
     cursor: pointer;
    }
<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

Contoh kerja 2:

    li
    {
     cursor: pointer;
    }
<ul>
  <li>foo</li>
  <li>bar</li>
</ul>


3

Anda dapat menggunakan kode di bawah ini:

li:hover { cursor: pointer; }


3

Untuk simbol tangan dasar:

Mencoba

cursor: pointer 

Jika Anda ingin simbol tangan seperti menarik beberapa item dan menjatuhkannya, coba:

cursor: grab


2

Menggunakan Hack HTML

Catatan: ini tidak dianjurkan karena dianggap praktik buruk

Membungkus konten dalam tag jangkar yang berisi hrefatribut akan berfungsi tanpa secara eksplisit menerapkan cursor: pointer;properti dengan efek samping dari properti anchor (diubah dengan CSS):

<a href="#" style="text-decoration: initial; color: initial;"><div>This is bad practice, but it works.</div></a>


1
Ini tidak bekerja Tag anchor hanya memiliki kursor pointer dengan garis bawah dan warna yang berbeda jika memiliki href.
Artyer

1
"Bagaimana saya bisa membuat kursor tangan ketika pengguna melayang di atas item daftar?" - Untuk pertanyaan khusus ini, ya. Tapi seperti yang ditunjukkan oleh @sandrooco bukan praktik yang baik.
Rohit Nair

1

Periksa yang berikut ini. Saya mendapatkannya dari W3Schools .

<!DOCTYPE html>
<html>
    <head>
        <style>
        .alias {cursor: alias;}
        .all-scroll {cursor: all-scroll;}
        .auto {cursor: auto;}
        .cell {cursor: cell;}
        .context-menu {cursor: context-menu;}
        .col-resize {cursor: col-resize;}
        .copy {cursor: copy;}
        .crosshair {cursor: crosshair;}
        .default {cursor: default;}
        .e-resize {cursor: e-resize;}
        .ew-resize {cursor: ew-resize;}
        .grab {cursor: -webkit-grab; cursor: grab;}
        .grabbing {cursor: -webkit-grabbing; cursor: grabbing;}
        .help {cursor: help;}
        .move {cursor: move;}
        .n-resize {cursor: n-resize;}
        .ne-resize {cursor: ne-resize;}
        .nesw-resize {cursor: nesw-resize;}
        .ns-resize {cursor: ns-resize;}
        .nw-resize {cursor: nw-resize;}
        .nwse-resize {cursor: nwse-resize;}
        .no-drop {cursor: no-drop;}
        .none {cursor: none;}
        .not-allowed {cursor: not-allowed;}
        .pointer {cursor: pointer;}
        .progress {cursor: progress;}
        .row-resize {cursor: row-resize;}
        .s-resize {cursor: s-resize;}
        .se-resize {cursor: se-resize;}
        .sw-resize {cursor: sw-resize;}
        .text {cursor: text;}
        .url {cursor: url(myBall.cur),auto;}
        .w-resize {cursor: w-resize;}
        .wait {cursor: wait;}
        .zoom-in {cursor: zoom-in;}
        .zoom-out {cursor: zoom-out;}
        </style>
    </head>

    <body>
        <h1>The cursor property</h1>
        <p>Mouse over the words to change the mouse cursor.</p>

        <p class="alias">alias</p>
        <p class="all-scroll">all-scroll</p>
        <p class="auto">auto</p>
        <p class="cell">cell</p>
        <p class="context-menu">context-menu</p>
        <p class="col-resize">col-resize</p>
        <p class="copy">copy</p>
        <p class="crosshair">crosshair</p>
        <p class="default">default</p>
        <p class="e-resize">e-resize</p>
        <p class="ew-resize">ew-resize</p>
        <p class="grab">grab</p>
        <p class="grabbing">grabbing</p>
        <p class="help">help</p>
        <p class="move">move</p>
        <p class="n-resize">n-resize</p>
        <p class="ne-resize">ne-resize</p>
        <p class="nesw-resize">nesw-resize</p>
        <p class="ns-resize">ns-resize</p>
        <p class="nw-resize">nw-resize</p>
        <p class="nwse-resize">nwse-resize</p>
        <p class="no-drop">no-drop</p>
        <p class="none">none</p>
        <p class="not-allowed">not-allowed</p>
        <p class="pointer">pointer</p>
        <p class="progress">progress</p>
        <p class="row-resize">row-resize</p>
        <p class="s-resize">s-resize</p>
        <p class="se-resize">se-resize</p>
        <p class="sw-resize">sw-resize</p>
        <p class="text">text</p>
        <p class="url">url</p>
        <p class="w-resize">w-resize</p>
        <p class="wait">wait</p>
        <p class="zoom-in">zoom-in</p>
        <p class="zoom-out">zoom-out</p>
    </body>
</html>

0

hanya menggunakan CSS untuk mengatur sesuaikan kursor kursor

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor


/* Keyword value */
cursor: pointer;
cursor: auto;

/* URL, with a keyword fallback */
cursor: url(hand.cur), pointer;

/* URL and coordinates, with a keyword fallback */
cursor: url(cursor1.png) 4 12, auto;
cursor: url(cursor2.png) 2 2, pointer;

/* Global values */
cursor: inherit;
cursor: initial;
cursor: unset;

demo

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

gambar hand.cur

li:hover{
   cursor: url("../icons/hand.cur"), 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.