Frage Wie kann ich dem Cursor eine Hand geben, wenn ein Benutzer den Mauszeiger über ein Listenelement bewegt?


Ich habe eine Liste und ich habe einen Klick-Handler für seine Artikel:

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

Wie kann ich den Mauszeiger in einen Handzeiger umwandeln (wie wenn ich den Mauszeiger über einen Knopf halte)? Im Augenblick verwandelt sich der Mauszeiger in einen Textauswahlzeiger, wenn ich den Mauszeiger über die Listenelemente halte.


1534
2018-06-21 19:45


Ursprung


Antworten:


Im Licht der Zeit, wie die Leute erwähnt haben, können Sie jetzt einfach sicher verwenden:

li { cursor: pointer; }

2603
2018-06-21 19:50



Sie benötigen jQuery dafür nicht, verwenden Sie einfach die folgende CSS:

li {cursor: pointer}

Und voilà! Praktisch.


136
2018-06-21 19:47



Verwenden Sie für li

li:hover{
 cursor: pointer;
}

Weitere Informationen zur cursor-Eigenschaft finden Sie im Beispiel nach dem Ausführen der Snippet-Option.

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

Andere gültige Werte (die hand ist nicht) für die aktuelle HTML-Spezifikation kann eingesehen werden Hier.


69
2018-01-07 11:50



benutzen

cursor: pointer;
cursor: hand;

wenn du ein Crossbrowserresultat haben willst!


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

Sie können den Cursor auch ein Bild haben:

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

33
2017-09-11 07:51



Dieser Thread ist außer Kontrolle geraten, es ging schnell von Cursors zu Streichinstrumenten. :)

Zum Glück schickt mich Google immer hierher, wenn ich eine kurze Erinnerung brauche, um einen kompletten Cross-Browser zu verwenden:

cursor: pointer;
cursor: hand;

16
2017-12-05 19:46



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

16
2018-06-05 21:52



Ich denke, es wäre schlau, nur den Zeigerzeiger anzuzeigen, wenn Javascript verfügbar ist. So haben die Leute nicht das Gefühl, dass sie auf etwas klicken können, das nicht anklickbar ist.

Um das zu erreichen, könnten Sie JavaScript verwenden, um das CSS dem Element hinzuzufügen

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

oder es direkt an den Click-Handler ketten.

Oder wann Modernisierer in Kombination mit <html class="no-js"> verwendet wird, würde das CSS so aussehen

.js li { cursor: pointer; }

16
2018-03-02 12:40