Vraag Hoe kan ik de cursor een hand geven wanneer een gebruiker over een lijstitem zweeft?


Ik heb een lijst en ik heb een klikhandler voor de items:

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

Hoe kan ik de muisaanwijzer in een handaanwijzer veranderen (zoals wanneer ik over een knop beweeg)? Op dit moment verandert de aanwijzer in een aanwijzer voor tekstselectie wanneer ik met de muis over de lijstitems beweeg.


1534
2018-06-21 19:45


oorsprong


antwoorden:


In het licht van het verstrijken van de tijd, zoals mensen hebben gezegd, kunt u nu veilig gewoon gebruiken:

li { cursor: pointer; }

2603
2018-06-21 19:50



Je hebt hiervoor geen jQuery nodig, gebruik simpelweg de volgende CSS:

li {cursor: pointer}

En voilà! Handig.


136
2018-06-21 19:47



Gebruik voor li

li:hover{
 cursor: pointer;
}

Zie meer cursoreigenschap met voorbeeld na het uitvoeren van de fragmentoptie.

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 geldige waarden (welke hand is niet) voor de huidige HTML-specificatie kan worden bekeken hier.


69
2018-01-07 11:50



gebruik

cursor: pointer;
cursor: hand;

als je een crossbrowser-resultaat wilt hebben!


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

Je kunt de cursor ook een afbeelding laten zijn:

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

33
2017-09-11 07:51



Deze thread loopt uit de hand, het ging snel van cursors naar strijkinstrumenten. :)

Gelukkig stuurt Google me altijd hierheen wanneer ik een snelle herinnering nodig heb, voor een complete browser, gebruik:

cursor: pointer;
cursor: hand;

16
2017-12-05 19:46



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

16
2018-06-05 21:52



Ik denk dat het slim zou zijn om alleen de hand / cursor te tonen wanneer javascript beschikbaar is. Mensen zullen dus niet het gevoel hebben dat ze kunnen klikken op iets dat niet klikbaar is.

Om dat te bereiken, zou je javascript kunnen gebruiken om de CSS aan het element toe te voegen, zoals zo

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

of koppel het rechtstreeks aan de click-handler.

Of wanneer modernizer in combinatie met <html class="no-js"> wordt gebruikt, zou de CSS er zo uitzien

.js li { cursor: pointer; }

16
2018-03-02 12:40