Membuat kursor tangan ketika pengguna melayang di atas daftar item

I've punya daftar, dan saya memiliki handler klik untuk item tersebut:

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

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

Alexander Abakumov
Pertanyaan edit 2 November 2018 в 7:59
Pemrograman
css
21 Juni 2010 в 7:45
41 tayangan
Mengomentari pertanyaan (4)
Larutan

Dalam perjalanan waktu, sebagai orang-orang yang telah disebutkan, anda sekarang dapat dengan aman hanya menggunakan:

li { cursor: pointer; }
Komentar (6)

Digunakan untuk li:

li:hover {
    cursor: pointer;
}

Lihat lebih banyak kursor properti dengan contoh setelah menjalankan cuplikan pilihan:

.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>
ihatecsv
Jawaban edit 21 Mei 2019 в 2:30
Komentar (4)

Anda tidak memerlukan jQuery untuk hal ini, hanya menggunakan CSS berikut isi:

li {cursor: pointer}

Dan voilà! Berguna.

Komentar (1)

Gunakan:

li:hover {
    cursor: pointer;
}

Lainnya berlaku-nilai (yang tangan adalah tidak) untuk saat ini spesifikasi HTML dapat dilihat di sini.

Komentar (4)

Gunakan

cursor: pointer;
cursor: hand;

jika anda ingin memiliki crossbrowser hasilnya!

Komentar (1)

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 memiliki kursor menjadi gambar:

.img-cur {
   cursor: url(images/cursor.png), auto;
}
Komentar (2)
 
li:hover {cursor: hand; cursor: pointer;}
Komentar (0)

Saya pikir itu akan menjadi pintar untuk hanya menunjukkan tangan/pointer kursor ketika JavaScript yang tersedia. Jadi orang-orang tidak akan memiliki perasaan bahwa mereka dapat mengklik pada sesuatu yang tidak dapat diklik.

Untuk mencapai itu anda bisa menggunakan JavaScript perpustakaan jQuery untuk menambahkan CSS untuk elemen seperti

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

Atau rantai itu langsung ke klik handler.

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

.js li { cursor: pointer; }
pixma140
Jawaban edit 30 Juli 2019 в 1:12
Komentar (0)

Hanya untuk kelengkapan:

cursor: -webkit-grab;

Hal ini juga memberikan sisi, salah satu yang anda tahu ketika bergerak pemandangan gambar di sekitar.

Hal ini cukup berguna jika anda ingin meniru ambil perilaku menggunakan jQuery dan mousedown.

Peter Mortensen
Jawaban edit 14 April 2019 в 9:29
Komentar (0)

Untuk menyelesaikan cross browser, gunakan:

cursor: pointer;
cursor: hand;
Komentar (0)

Cukup hanya melakukan 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 tidak lupa anda dapat memiliki tangan kursor disesuaikan dengan kursor, anda dapat membuat fav ikon tangan 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>
Komentar (0)
ul li:hover{
   cursor: pointer;
}
Komentar (0)

Untuk mampu membuat apa-apa mendapatkan "mousechange" pengobatan, anda dapat menambahkan class CSS:

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

Saya tidak akan mengatakan untuk menggunakan cursor:hand karena itu hanya berlaku untuk Internet Explorer 5.5 dan di bawah, dan Internet Explorer 6 datang dengan Windows XP (2002). Orang-orang hanya akan mendapatkan petunjuk untuk meng-upgrade ketika browser mereka berhenti bekerja untuk mereka. Selain itu, di Visual Studio, itu akan menggarisbawahi merah yang masuk. Ia memberitahu saya:

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

vapcguy
Jawaban edit 15 April 2019 в 7:44
Komentar (0)

Gunakan:

ul li:hover{
   cursor: pointer;
}

Untuk lebih lanjut mouse acara, check CSS kursor properti.

Peter Mortensen
Jawaban edit 14 April 2019 в 9:28
Komentar (0)

Semua tanggapan sarankan menggunakan standar CSS pointer, namun, ada dua metode:

  1. Menerapkan CSS property cursor:pointer; untuk unsur-unsur. (Ini adalah default gaya ketika kursor melayang di atas tombol.)

  2. Menerapkan CSS property cursor:url(pointer.png); menggunakan grafis kustom untuk pointer anda. Ini mungkin lebih diinginkan jika anda ingin memastikan bahwa pengalaman pengguna yang identik pada semua platform (bukan yang memungkinkan browser/OS memutuskan apa yang anda pointer kursor akan terlihat seperti). Perhatikan bahwa fallback pilihan dapat ditambahkan jika gambar tidak ditemukan, termasuk sekunder url atau pilihan lain yaitu cursor:url(pointer.png,mundur.png,penunjuk);

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

Komentar (0)

Anda dapat menggunakan salah satu dari berikut:

li:hover
{
 cursor: pointer;
}

atau

li
{
 cursor: pointer;
}

Kerja contoh 1:

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

Kerja contoh 2:

    li
    {
     cursor: pointer;
    }
<ul>
  <li>foo</li>
  <li>bar</li>
</ul>
Komentar (0)

Anda juga dapat menggunakan berikut gaya:

li {
    cursor: grabbing;
}
Peter Mortensen
Jawaban edit 14 April 2019 в 9:31
Komentar (0)

Anda dapat menggunakan kode di bawah ini:

li:hover { cursor: pointer; }

Komentar (0)

Untuk tangan dasar simbol:

Mencoba

cursor: pointer

Jika anda ingin simbol tangan seperti menyeret beberapa item dan drop, coba:

cursor: grab
Komentar (0)

Menggunakan HTML Hack

Catatan: hal ini tidak dianjurkan karena dianggap praktik yang buruk

Pembungkus konten dalam sebuah tag anchor yang mengandung href atribut akan bekerja tanpa secara eksplisit menerapkan cursor: pointer; properti dengan efek samping dari jangkar sifat (diubah dengan CSS):

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