Ich habe eine Liste und einen Klick-Handler für die Elemente:

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

Wie kann ich den Mauszeiger in einen Handzeiger verwandeln (wie beim Bewegen des Mauszeigers über eine Schaltfläche)? Im Moment verwandelt sich der Zeiger in einen Textauswahlzeiger, wenn ich mit der Maus über die Listenelemente fahre.

In Anbetracht des Zeitablaufs können Sie, wie bereits erwähnt, jetzt sicher Folgendes verwenden:

li { cursor: pointer; }

Verwendung für li:

li:hover {
    cursor: pointer;
}

Weitere Cursoreigenschaften mit Beispielen nach dem Ausführen der Snippet-Option:

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

Sie benötigen dafür keine jQuery. Verwenden Sie einfach den folgenden CSS-Inhalt:

li {cursor: pointer}

Und voilà! Praktisch.

Verwenden:

li:hover {
    cursor: pointer;
}

Andere gültige Werte (was nicht der Fall handist ) für die aktuelle HTML-Spezifikation können hier angezeigt werden .

Verwenden

cursor: pointer;
cursor: hand;

wenn Sie ein Crossbrowser-Ergebnis haben wollen!

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

Sie können den Cursor auch als Bild verwenden:

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

Ich denke, es wäre klug, den Hand- / Zeigercursor nur anzuzeigen, wenn JavaScript verfügbar ist. Die Leute haben also nicht das Gefühl, auf etwas klicken zu können, das nicht anklickbar ist.

Um dies zu erreichen, können Sie die JavaScript-Bibliothek jQuery verwenden, um das CSS wie folgt zum Element hinzuzufügen

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

Oder verketten Sie es direkt mit dem Click-Handler.

Oder wenn ein Modernisierer in Kombination mit <html class="no-js">verwendet wird, sieht das CSS folgendermaßen aus:

.js li { cursor: pointer; }

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

Nur der Vollständigkeit halber:

cursor: -webkit-grab;

Es gibt auch eine Hand, die Sie kennen, wenn Sie die Ansicht eines Bildes verschieben.

Dies ist sehr nützlich, wenn Sie das Grab-Verhalten mit jQuery und Mousedown emulieren möchten.

Verwenden Sie für einen vollständigen Cross-Browser:

cursor: pointer;
cursor: hand;

Mach einfach so etwas:

li { 
  cursor: pointer;
}

Ich wende es auf Ihren Code an, um zu sehen, wie es funktioniert:

li {
  cursor: pointer;
}

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

Hinweis: Vergessen Sie auch nicht , dass Sie einen beliebigen Handcursor mit einem benutzerdefinierten Cursor haben können. Sie können beispielsweise ein Lieblingshandsymbol wie dieses erstellen:

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>

Sie können eine CSS-Klasse hinzufügen, damit alles die "Mauswechsel" -Behandlung erhält:

.mousechange:hover {
  cursor: pointer;
}

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

Ich würde nicht sagen, zu verwenden, cursor:handda es nur für Internet Explorer 5.5 und niedriger gültig war und Internet Explorer 6 mit Windows XP (2002) geliefert wurde. Benutzer erhalten nur dann den Hinweis auf ein Upgrade, wenn ihr Browser nicht mehr für sie funktioniert. In Visual Studio wird dieser Eintrag außerdem rot unterstrichen. Es sagt mir:

Validierung (CSS 3.0): "hand" ist kein gültiger Wert für die Eigenschaft "cursor"

ul li:hover{
   cursor: pointer;
}

Alle anderen Antworten schlagen vor, den Standard-CSS-Zeiger zu verwenden. Es gibt jedoch zwei Methoden:

1. Wenden Sie die CSS-Eigenschaft cursor:pointer;auf die Elemente an. (Dies ist der Standardstil, wenn sich ein Cursor über einer Schaltfläche befindet.)

2. Wenden Sie die CSS-Eigenschaft cursor:url(pointer.png);mithilfe einer benutzerdefinierten Grafik für Ihren Zeiger an. Dies kann wünschenswerter sein, wenn Sie sicherstellen möchten, dass die Benutzererfahrung auf allen Plattformen identisch ist (anstatt dem Browser / Betriebssystem zu erlauben, zu entscheiden, wie Ihr Zeigercursor aussehen soll). Beachten Sie, dass Fallback-Optionen hinzugefügt werden können, falls das Bild nicht gefunden wird, einschließlich sekundärer URLs oder einer der anderen Optionen, zcursor:url(pointer.png,fallback.png,pointer);

Natürlich können diese auf diese Weise li{cursor:pointer;}als Klasse .class{cursor:pointer;}oder als Wert für das Stilattribut jedes Elements auf die Listenelemente angewendet werden style="cursor:pointer;".

Verwenden:

ul li:hover{
   cursor: pointer;
}

Überprüfen Sie für weitere Mausereignisse die CSS-Cursoreigenschaft .

Sie können eine der folgenden Optionen verwenden:

li:hover
{
 cursor: pointer;
}

oder

li
{
 cursor: pointer;
}

Arbeitsbeispiel 1:

    li:hover
    {
     cursor: pointer;
    }

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

Arbeitsbeispiel 2:

    li
    {
     cursor: pointer;
    }

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

Sie können den folgenden Code verwenden:

li:hover { cursor: pointer; }

Für ein einfaches Handsymbol:

Versuchen

cursor: pointer 

Wenn Sie ein Handsymbol wie Ziehen und Ablegen eines Elements möchten, versuchen Sie Folgendes:

cursor: grab

Sie können auch den folgenden Stil verwenden:

li {
    cursor: grabbing;
}

Verwenden eines HTML-Hack

Hinweis: Dies wird nicht empfohlen, da dies als schlechte Praxis angesehen wird

Das Umschließen des Inhalts in ein Ankertag, das ein hrefAttribut enthält, funktioniert ohne explizite Anwendung der cursor: pointer;Eigenschaft mit dem Nebeneffekt der Ankereigenschaften (geändert mit CSS):

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

Überprüfe das Folgende. Ich bekomme es von 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>

Verwenden Sie einfach CSS, um den Cursorzeiger anzupassen

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>

hand.cur Bild

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