it-swarm.com.de

Machen Sie den Cursor zu einer Hand, wenn sich ein Benutzer über einem Listenelement befindet

Ich habe eine Liste und einen Click-Handler für die Artikel:

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

Wie kann ich den Mauszeiger in einen Handzeiger verwandeln (wie wenn ich über eine Schaltfläche schwebe)? Im Moment verwandelt sich der Zeiger in einen Textauswahlzeiger, wenn ich den Mauszeiger über die Listenelemente bewege.

1828
user246114

Im Laufe der Zeit können Sie nun, wie bereits erwähnt, ohne Bedenken Folgendes verwenden:

li { cursor: pointer; }
3050
Aren

Verwenden Sie für li:

li:hover {
    cursor: pointer;
}

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

An animation showing a cursor hovering over a div of each class

.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>
274
Santosh Khalse

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

li {cursor: pointer}

Und voilà! Praktisch.

148

Verwenden:

li:hover {
    cursor: pointer;
}

Andere gültige Werte (die hand ist nicht ) für die aktuelle HTML-Spezifikation können angezeigt werden hier .

75
Alastair

Verwenden

cursor: pointer;
cursor: hand;

wenn du ein Crossbrowser-Ergebnis haben willst!

42
biancardi

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

Der Cursor kann auch ein Bild sein:

.img-cur {
   cursor: url(images/cursor.png), auto;
}
38
li:hover {cursor: hand; cursor: pointer;}
16
Xedret

Ich halte es für klug, den Hand-/Zeigercursor nur dann anzuzeigen, wenn JavaScript verfügbar ist. Die Leute werden also nicht das Gefühl haben, 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 dem Element wie folgt hinzuzufügen

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

Oder verketten Sie es direkt mit dem Click-Handler.

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

.js li { cursor: pointer; }
16
Christoph

Verwenden Sie für vollständige Cross-Browser:

cursor: pointer;
cursor: hand;
14
Erich Toven

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 Greifverhalten mit jQuery und mousedown emulieren möchten .

Enter image description here

14
Kai Noack

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: Auch NICHT Vergessen Sie, dass Sie einen beliebigen Handcursor mit benutzerdefiniertem Cursor haben können. Sie können ein Lieblingshandsymbol wie das folgende erstellen, zum Beispiel:

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>
9
Alireza
ul li:hover{
   cursor: pointer;
}
8
user3776645

Damit alles die "mousechange" -Behandlung bekommt, können Sie eine CSS-Klasse hinzufügen:

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

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

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

8
vapcguy

In allen anderen Antworten wird empfohlen, 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 der Cursor über einer Schaltfläche befindet.)

  2. Wenden Sie die CSS-Eigenschaft cursor:url(pointer.png); mit einer benutzerdefinierten Grafik für Ihren Zeiger an. Dies ist möglicherweise wünschenswerter, 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, d. H. cursor:url(pointer.png,fallback.png,pointer);

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

6
Andrew

Verwenden:

ul li:hover{
   cursor: pointer;
}

Aktivieren Sie für weitere Mausereignisse CSS-Cursoreigenschaft .

6

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>
4
willy wonka

Für ein einfaches Handsymbol:

Versuchen

cursor: pointer 

Wenn Sie ein Handsymbol möchten, z. B. einen Gegenstand ziehen und ablegen, versuchen Sie Folgendes:

cursor: grab
2

Sie können auch den folgenden Stil verwenden:

li {
    cursor: grabbing;
}
2
Ankit Misra

Verwenden eines HTML-Hack

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

Das Umbrechen des Inhalts in ein Ankertag mit einem href -Attribut funktioniert ohne explizite Anwendung der cursor: pointer; -Eigenschaft mit dem Nebeneffekt von Ankereigenschaften (geändert mit CSS):

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

Sie können den folgenden Code verwenden:

li:hover { cursor: pointer; }

2
Captain JK

Ü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>
1

verwenden Sie einfach CSS, um den Cursor-Zeiger 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;
}

0
xgqfrms