Pytanie Jak mogę ustawić kursor, gdy użytkownik unosi się nad elementem listy?


Mam listę i mam program obsługi kliknięć dla jej elementów:

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

W jaki sposób mogę zmienić wskaźnik myszy na wskaźnik ręczny (np. Po najechaniu kursorem myszy nad przyciskiem)? Teraz wskaźnik zamienia się w wskaźnik wyboru tekstu, gdy umieściłem kursor na elementach listy.


1540
2018-06-21 19:45


pochodzenie


FYI, retagged twoje pytanie, usuwając "jquery" i dodając "css", aby dokładniej odzwierciedlać naturę twojego pytania i odpowiedzi na to pytanie. - Christopher Parker
Dobra lista referencyjna do zmiany kursora na rękę i inne ikony dostępne w css. javascriptkit.com/dhtmltutors/csscursors.shtml - Neil
Jeśli istnieje obsługa kliknięć dodawana z JavaScriptem, to css dla wskaźnika myszy powinien zostać dodany za pomocą JavaScript. Użytkownik nie myśli więc, że mógłby kliknąć tam, gdzie nie jest to możliwe. Dodałem odpowiednią odpowiedź dla tego. - Christoph


Odpowiedzi:


W świetle upływu czasu, jak już wspomniano, możesz teraz bezpiecznie użyć:

li { cursor: pointer; }

2611
2018-06-21 19:50



Warto zauważyć, że po prostu robi cursor: pointer jest wystarczająco dobre dla wszystkiego powyżej IE 5.5: quirksmode.org/css/cursor.html - ripper234
To zabawne, jak wskaźnik! = Kursor i ręka! = Wskaźnik, dodając jeszcze więcej do zamieszania. :) - Henrik Erlandsson
Nutowy, quirksmode.org/css/user-interface/cursor.html#note (wspomniany we wcześniejszym komentarzu) stwierdza, że ​​ręka musi nadejść po wskaźnik. Polecam używanie tylko wskaźnika - IE 5.5 jest bardziej awaryjny niż IE 6. - Iiridayn
@EdwardBlack był kiedyś wymagany w przypadku nieparzystych przeglądarek, które nie były zgodne ze standardami, odpowiedź została zaktualizowana dawno temu, aby odzwierciedlić nowy sposób, który jest po prostu pointer to pytanie ma ponad 5 lat. - Aren
a co z IE4? ;) - Kamil Kiełczewski


Nie wymaga jQuery do tego, po prostu użyj następujących css:

li {cursor: pointer}

I voila! Poręczny.


137
2018-06-21 19:47





Użyj dla li

li:hover{
 cursor: pointer;
}

Zobacz więcej właściwości kursora na przykładzie po uruchomieniu opcji snippet.

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>


128
2018-01-04 11:21



Niesamowite ! Bardzo przydatne :) - Valentin Genevrais
Off topic, Używanie oprogramowania, które wykonałeś w animacji gif? Czekam .. @ Santosh Khalse - fWd82
@ fWd82 sprawdź ShareX - nagraj gif - Hidden


li:hover {
    cursor: pointer;
}

Inne prawidłowe wartości (które hand jest nie), aby wyświetlić aktualną specyfikację HTML tutaj.


70
2018-01-07 11:50



Nie rozumiem, co to jest użycie :hover pseudo klasa jest w tym przypadku. Czy istnieje jakaś przewaga przy określaniu innego kursora, gdy robi to mysz nie unosić element? Też to czytałem li:hover nie działa w IE6. - Robert
Przypuszczam :hover jest tylko dla specyfiki, @Robert. Nie mogę przetestować wsparcia w żadnej wersji MSIE, przepraszam, ale nie zdziwiłbym się, gdyby to nie zadziałało! : P - Alastair
dlaczego jest hand w górnej odpowiedzi, nawet jeśli nie działa? - Black
@EdwardBlack cursor: hand jest przestarzałe, a nie w specyfikacji css. to jak z 5 do 6 ery. tylko do użytku pointer. - northamerican


posługiwać się

cursor: pointer;
cursor: hand;

jeśli chcesz mieć wynik crossbrowser!


37
2017-10-27 07:34



To jest 2018, a kursor: ręka nie jest już potrzebna do rozwoju różnych przeglądarek? - Haramoz


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

Możesz także ustawić kursor jako obraz:

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

33
2017-09-11 07:51



To nie jest odpowiedź na pytanie. - Benio
dzięki za wszystkie możliwe wartości. - Wesam Alalem
to może nie jest bezpośrednia odpowiedź na to pytanie, ale jest to bardzo dobra wskazówka. dzięki przy okazji! - chitcharonko
Możesz spróbować tutaj: w3schools.com/cssref/tryit.asp?filename=trycss_cursor - GKislin


Ten wątek wymyka się spod kontroli, szybko przechodzi od kursorów do instrumentów smyczkowych. :)

Na szczęście Google zawsze wysyła mnie tutaj, kiedy potrzebuję szybkiego przypomnienia, aby uzyskać pełną przeglądarkę, użyj:

cursor: pointer;
cursor: hand;

16
2017-12-05 19:46





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

16
2018-06-05 21:52





Myślę, że byłoby mądrze pokazać tylko kursor dłoni / wskaźnika, gdy javascript jest dostępny. Ludzie nie będą mieli wrażenia, że ​​mogą kliknąć coś, co nie jest klikalne.

Aby to osiągnąć, możesz użyć javascript, aby dodać css do elementu w taki sposób

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

lub łańcuchuj go bezpośrednio do obsługi kliknięcia.

Albo kiedy modernizator w połączeniu z <html class="no-js"> jest używany, css wyglądałby tak

.js li { cursor: pointer; }

16
2018-03-02 12:40