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 el işaretçisi olarak nasıl değiştirebilirim (bir düğmenin üzerine geldiğinizde olduğu gibi)? Listedeki öğelerin üzerine geldiğimde imleç bir metin seçim işaretçisine dönüşüyor.

Zamanın ışığında, insanların belirttiği gibi, artık güvenle kullanabilirsiniz:

li { cursor: pointer; }

Şunun için kullanın li:

li:hover {
    cursor: pointer;
}

Snippet seçeneğini çalıştırdıktan sonra örneklerle daha fazla imleç özelliğine bakın:

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

Bunun için jQuery gerekmez, aşağıdaki CSS içeriğini kullanmanız yeterlidir:

li {cursor: pointer}

Ve voilà! Kullanışlı.

kullanın:

li:hover {
    cursor: pointer;
}

Diğer geçerli değerler (ki handolduğu değil geçerli HTML spesifikasyonu için) görülebilir burada .

kullanım

cursor: pointer;
cursor: hand;

Eğer bir crossbrowser sonucu elde etmek istiyorsanız!

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

İmlecin bir görüntü olmasını da sağlayabilirsiniz:

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

Sadece el / işaretçi imlecini JavaScript kullanılabilir olduğunda göstermenin akıllı olacağını düşünüyorum. Böylece insanlar tıklanabilir olmayan bir şeye tıklayabilecekleri hissine sahip olmayacaklardır.

Bunu başarmak için JavaScript libary jQuery komutunu kullanarak CSS öğesini

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

Veya doğrudan tıklama işleyicisine zincirleyin.

Veya modernleştirici ile birlikte <html class="no-js">kullanıldığında, CSS şöyle görünür:

.js li { cursor: pointer; }

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

Sadece bütünlük için:

cursor: -webkit-grab;

Ayrıca, bir görüntünün görünümünü hareket ettirirken bildiğiniz bir el verir.

JQuery ve mousedown kullanarak kapma davranışını taklit etmek istiyorsanız oldukça kullanışlıdır .

Tam çapraz tarayıcı için şunu kullanın:

cursor: pointer;
cursor: hand;

Sadece böyle bir şey yapın:

li { 
  cursor: pointer;
}

Nasıl çalıştığını görmek için kodunuza uygularım:

li {
  cursor: pointer;
}

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

Not: Ayrıca not DO örneğin bunun gibi favori el simgesi oluşturabilir, özelleştirilmiş imleç ile hiç bir el imleci olabilir unutmak:

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>

Bir şey "fare mekanizması" tedavi almak için yapabilmek için, bir CSS sınıfı ekleyebilirsiniz:

.mousechange:hover {
  cursor: pointer;
}

<span class="mousechange">Some text here</span>

cursor:handSadece Internet Explorer 5.5 ve önceki sürümler için geçerli olduğu ve Internet Explorer 6'nın Windows XP (2002) ile birlikte geldiği için kullanmayı söyleyemem . Kullanıcılar yalnızca tarayıcıları onlar için çalışmayı bıraktığında yükseltme ipucu alacaktır. Ayrıca, Visual Studio'da bu girdinin kırmızı altını çizecektir. Bana şunu söyler:

Doğrulama (CSS 3.0): "el", "imleç" özelliği için geçerli bir değer değil

ul li:hover{
   cursor: pointer;
}

Diğer tüm yanıtlar standart CSS işaretçisini kullanmanızı önerir, ancak iki yöntem vardır:

1. Öğelere CSS özelliğini uygulayın cursor:pointer;. (Bu, imleç bir düğmenin üzerine geldiğinde varsayılan stildir.)

2. cursor:url(pointer.png);İşaretçiniz için özel bir grafik kullanarak CSS özelliğini uygulayın . Kullanıcı deneyiminin tüm platformlarda aynı olmasını sağlamak istiyorsanız bu daha cazip gelebilir (tarayıcı / işletim sisteminin işaretçi imlecinizin neye benzemesi gerektiğine karar vermesine izin vermek yerine). İkincil URL'ler veya diğer seçeneklerden herhangi biri dahil olmak üzere, görüntünün bulunmaması durumunda yedek seçeneklerin eklenebileceğini unutmayın.cursor:url(pointer.png,fallback.png,pointer);

Elbette bunlar liste öğelerine bu şekilde li{cursor:pointer;}, bir sınıf .class{cursor:pointer;}olarak veya her öğenin stil özelliği için bir değer olarak uygulanabilir style="cursor:pointer;".

kullanın:

ul li:hover{
   cursor: pointer;
}

Daha fazla fare olayı için CSS imleç özelliğini kontrol edin .

Aşağıdakilerden birini kullanabilirsiniz:

li:hover
{
 cursor: pointer;
}

veya

li
{
 cursor: pointer;
}

Çalışma örneği 1:

    li:hover
    {
     cursor: pointer;
    }

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

Çalışma örneği 2:

    li
    {
     cursor: pointer;
    }

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

Aşağıdaki kodu kullanabilirsiniz:

li:hover { cursor: pointer; }

Temel bir el simgesi için:

Deneyin

cursor: pointer 

Bir öğeyi sürükleyip bırakmak gibi bir el simgesi istiyorsanız şunu deneyin:

cursor: grab

Aşağıdaki stili de kullanabilirsiniz:

li {
    cursor: grabbing;
}

HTML Hack Kullanma

Not: Kötü uygulama olarak kabul edildiğinden bu önerilmez

Bir hreföznitelik içeren bir tutturma etiketindeki içeriği sarmalamak, cursor: pointer;özelliği tutturma özelliklerinin (CSS ile değiştirilmiş) yan etkisi ile açıkça uygulamadan çalışır :

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

Aşağıdakileri kontrol et. Ben onu almak W3Schools'da .

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

sadece imleç işaretçisini özelleştirmek için CSS kullanarak

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;

gösteri

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

hand.cur resmi

li:hover{
   cursor: url("../icons/hand.cur"), pointer;
}