Pertanyaan Bagaimana saya bisa membuat kursor tangan ketika pengguna melayang di atas daftar item?


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

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

Bagaimana saya bisa mengubah penunjuk mouse ke penunjuk tangan (seperti ketika melayang di atas tombol)? Saat ini penunjuk berubah menjadi penunjuk pilihan teks saat saya mengarahkan kursor ke daftar item.


1534
2018-06-21 19:45


asal


Jawaban:


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

li { cursor: pointer; }

2603
2018-06-21 19:50



Anda tidak memerlukan jQuery untuk ini, cukup gunakan css berikut:

li {cursor: pointer}

Dan voila! Berguna.


136
2018-06-21 19:47



Gunakan untuk li

li:hover{
 cursor: pointer;
}

Lihat properti kursor lainnya dengan contoh setelah menjalankan opsi cuplikan.

enter image description here

.auto            { cursor: auto; }
.deafult         { 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>


125
2018-01-04 11:21



li:hover {
    cursor: pointer;
}

Nilai valid lainnya (yang hand aku s tidak) untuk spesifikasi HTML saat ini dapat dilihat sini.


69
2018-01-07 11:50



menggunakan

cursor: pointer;
cursor: hand;

jika Anda ingin memiliki hasil crossbrowser!


37
2017-10-27 07:34



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 berupa gambar:

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

33
2017-09-11 07:51



Benang ini tidak terkendali, dengan cepat beralih dari kursor ke instrumen string. :)

Untungnya Google selalu mengirim saya ke sini ketika saya membutuhkan pengingat cepat, untuk peramban lintas lengkap, gunakan:

cursor: pointer;
cursor: hand;

16
2017-12-05 19:46



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

16
2018-06-05 21:52



Saya pikir itu akan pintar untuk hanya menunjukkan kursor tangan / pointer ketika javascript tersedia. Jadi orang tidak akan merasa mereka dapat mengklik sesuatu yang tidak dapat diklik.

Untuk mencapai itu Anda bisa menggunakan javascript untuk menambahkan css ke elemen seperti itu

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

atau rantai langsung ke handler klik.

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

.js li { cursor: pointer; }

16
2018-03-02 12:40