Soru Bir kullanıcı liste öğesi üzerinde gezinirken imleci nasıl el yapabilirim?


Bir listem var ve öğeleri için bir tıklama işleyicim var:

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

Fare işaretçisini bir el işaretçisine nasıl değiştirebilirim (bir düğmenin üzerine geldiğinde olduğu gibi)? Şu anda işaretçi, liste öğelerinin üzerine geldiğimde bir metin seçim işaretçisine dönüşüyor.


1540
2018-06-21 19:45


Menşei


Bilginize, "jquery" yi kaldırarak ve sorunuzun doğasını ve cevabını daha doğru bir şekilde yansıtmak için "css" ekleyerek sorunuzu yeniden etiketledim. - Christopher Parker
İmleci bir ele ve css'de bulunan diğer simgelere değiştirmek için iyi bir referans listesi. javascriptkit.com/dhtmltutors/csscursors.shtml - Neil
JavaScript ile eklenen bir tıklama işleyici varsa, fare işaretçisi için css de JavaScript ile eklenmelidir. Böylece kullanıcı, mümkün olmayan yerde tıklayabileceğini düşünmüyor. Uygun ekledim Cevap bunun için. - Christoph


Cevaplar:


Zaman geçtikçe, insanların bahsettiği gibi, şimdi güvenle kullanabilirsiniz:

li { cursor: pointer; }

2611
2018-06-21 19:50



Sadece yapmaya değer cursor: pointer IE 5.5'in üzerindeki her şey için yeterince iyidir: quirksmode.org/css/cursor.html - ripper234
Bu nasıl bir işaretçi! = İmleç ve el! = İşaretçiyi, karışıklığa daha da fazla katıyor. :) - Henrik Erlandsson
Notun, quirksmode.org/css/user-interface/cursor.html#note (önceki bir yorumda atıfta bulunularak) elin gelmesi gerektiğini belirtir. sonra Işaretçi. Sadece işaretçi kullanmanızı tavsiye ederim - IE 5.5 IE 6'dan daha ölümcül. - Iiridayn
@EdwardBlack, standartlarla uyumlu olmayan tekil tarayıcılar için gerekliydi, cevap uzun bir süre önce yeni yolunu yansıtacak şekilde güncellendi. pointer Bu soru 5 yaşından büyük btw. - Aren
IE4 ne olacak? ;) - Kamil Kiełczewski


Bunun için jQuery gerekmez, sadece aşağıdaki css kullanın:

li {cursor: pointer}

Ve voilà! Kullanışlı.


137
2018-06-21 19:47





Li için kullanın

li:hover{
 cursor: pointer;
}

Snippet seçeneğini çalıştırdıktan sonra örnek olarak imleç özelliğini görün.

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>


128
2018-01-04 11:21



Harika! Çok kullanışlı :) - Valentin Genevrais
Konu dışı, Bu gif animasyonunu hangi yazılımı kullandınız? Bekliyor .. @ Santosh Khalse - fWd82
@ fWd82 kontrol ShareX - bir gif kaydı - Hidden


li:hover {
    cursor: pointer;
}

Diğer geçerli değerler (hangisi hand olduğu değil) geçerli HTML özellikleri için görüntülenebilir İşte.


70
2018-01-07 11:50



Ne kullanımını anlamıyorum :hover sözde sınıf bu durumda. Fare ne zaman farklı bir imleç belirtmek için herhangi bir avantaj var mı değil öğeyi hover? Ayrıca bunu okudum li:hover IE6'da çalışmıyor. - Robert
sanırım :hover sadece özgüllük için, @Robert. MSIE'nin herhangi bir sürümünde destek için test edemem üzgünüm, ama işe yaramazsa beni şaşırtmayacak! : P - Alastair
neden ki hand En iyi cevapta, çalışmadığı halde mi? - Black
@EdwardBlack cursor: hand kullanım dışıdır ve css özelliğinde değildir. ie5-6 dönemi gibi. sadece kullan pointer. - northamerican


kullanım

cursor: pointer;
cursor: hand;

Eğer bir crossbrowser sonucuna sahip olmak istiyorsanız!


37
2017-10-27 07:34



Bu 2018 ve imleç: çapraz tarayıcı geliştirme için el artık gerekli değil mi? - Haramoz


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

İmleç bir görüntü de olabilir:

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

33
2017-09-11 07:51



Bu sorunun cevabı değildir. - Benio
tüm olası değerler için teşekkürler. - Wesam Alalem
Bu soruya doğrudan bir cevap olmayabilir, ancak bu çok iyi bir kılavuzdur. Bu arada teşekkürler! - chitcharonko
Burada deneyebilirsiniz: w3schools.com/cssref/tryit.asp?filename=trycss_cursor - GKislin


Bu iş parçacığı elden çıkıyor, hızla imleçlerden yaylı çalgılara geçiyordu. :)

Neyse ki Google, tam bir çapraz tarayıcı için hızlı bir hatırlatıcıya ihtiyacım olduğunda her zaman beni buraya gönderir:

cursor: pointer;
cursor: hand;

16
2017-12-05 19:46





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

16
2018-06-05 21:52





Javascript kullanılabilir olduğunda sadece el / işaretçi imleci göstermek için akıllı olacağını düşünüyorum. Böylece insanlar tıklanabilir olmayan bir şeye tıklayabilecekleri hissine sahip olmayacaklar.

Bunu elde etmek için javascript'i css'ye eklemek için kullanabilirsiniz.

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

veya doğrudan tıklama işleyicisine zincirleme yapın.

Ya da ne zaman moderniser ile bütünlüğünde <html class="no-js"> kullanılır, css şöyle görünür

.js li { cursor: pointer; }

16
2018-03-02 12:40





Sadece tamlık için:

cursor: -webkit-grab;

aynı zamanda, etrafındaki bir görüntüyü hareket ettirirken bildiğiniz bir el verir.

İsterseniz oldukça yararlı kepçe davranışını taklit etmek jquery ve mousedown kullanarak.

enter image description here


13
2017-08-18 15:19





ul li:hover{
   cursor: pointer;
}

8
2017-12-21 18:34