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.

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

li { cursor: pointer; }

Gunakan untuk li:

li:hover {
    cursor: pointer;
}

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

.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>

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

li {cursor: pointer}

Dan voila! Berguna.

Menggunakan:

li:hover {
    cursor: pointer;
}

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

Menggunakan

cursor: pointer;
cursor: hand;

jika Anda ingin memiliki hasil crossbrowser!

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

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

li:hover {cursor: hand; cursor: pointer;}

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.

Untuk browser lintas lengkap, gunakan:

cursor: pointer;
cursor: hand;

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>

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"

ul li:hover{
   cursor: pointer;
}

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

Menggunakan:

ul li:hover{
   cursor: pointer;
}

Untuk acara mouse lainnya, periksa properti kursor CSS .

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>

Anda dapat menggunakan kode di bawah ini:

li:hover { cursor: pointer; }

Untuk simbol tangan dasar:

Mencoba

cursor: pointer 

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

cursor: grab

Anda juga dapat menggunakan gaya berikut:

li {
    cursor: grabbing;
}

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>

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>

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