66 views

Hoe verander je de cursor in een hand wanneer een gebruiker de muisaanwijzer op een lijstitem plaatst?

Hosted by Code Expert
css

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 de muisaanwijzer over een knop beweeg)? Op dit moment verandert de aanwijzer in een aanwijzer voor tekstselectie wanneer ik de muisaanwijzer over de lijstitems beweeg.

Antwoord 1, autoriteit 100%

In het licht van het verstrijken van de tijd, zoals mensen hebben gezegd, kun je nu veilig gewoon het volgende gebruiken:

li { cursor: pointer; }

Antwoord 2, autoriteit 12%

Gebruik voor li:

li:hover {
    cursor: pointer;
}

Bekijk meer cursoreigenschappen met voorbeelden na het uitvoeren van de fragmentoptie:

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

Antwoord 3, autoriteit 5%

Je hebt hiervoor geen jQuery nodig, gebruik gewoon de volgende CSS-inhoud:

li {cursor: pointer}

En voilà! Handig.

Antwoord 4, autoriteit 2%

Gebruik:

li:hover {
    cursor: pointer;
}

Andere geldige waarden (die handnietis) voor de huidige HTML-specificatie kunnen worden bekeken hier.

Antwoord 5

Gebruik

cursor: pointer;
cursor: hand;

als u een crossbrowser-resultaat wilt hebben!

Antwoord 6

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

U kunt de cursor ook een afbeelding laten zijn:

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

Antwoord 7

Ik denk dat het slim zou zijn om alleen de hand-/aanwijzercursor weer te geven als JavaScript beschikbaar is. Mensen zullen dus niet het gevoel hebben dat ze op iets kunnen klikken dat niet klikbaar is.

Om dat te bereiken zou je de JavaScript-bibliotheek jQuery kunnen gebruiken om de CSS op deze manier aan het element toe te voegen

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

of ketting rechtstreeks naar de Click-handler.

of wanneer modernizer in combinatie met <html class="no-js">Wordt gebruikt, de CSS zou er als volgt uitzien: 

.js li { cursor: pointer; }

Antwoord 8 

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

Antwoord 9

Alleen voor volledigheid: 

cursor: -webkit-grab;

Het geeft ook een hand, degene die u kent bij het verplaatsen van het beeld van een afbeelding rond.

Het is heel handig als u emuleren Grijpgedrag gebruiken met jQuery en muisedown.

Antwoord 10

Gebruik voor volledige kruisbrowser: 

cursor: pointer;
cursor: hand;

Antwoord 11

Doe gewoon zoiets als volgt: 

li { 
  cursor: pointer;
}

Ik pas het toe op uw code om te zien hoe het werkt: 

li {
  cursor: pointer;
}
<ul>
  <li>foo</li>
  <li>goo</li>
</ul>

Antwoord 12

Om alles te kunnen maken, krijgt u de “MouseChange” -behandeling, u kunt een CSS-klasse toevoegen: 

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

Antwoord 13 

ul li:hover{
   cursor: pointer;
}

Antwoord 14

Alle andere antwoorden suggereren het gebruik van de standaard CSS-aanwijzer, maar er zijn twee methoden:

  1. Pas de CSS-eigendom toe cursor:pointer;NAAR DE ELEMENTEN. (Dit is de standaardstijl wanneer een cursor over een knop zweeft.)

  2. Pas de CSS-eigenschap toe cursor:url(pointer.png);met behulp van een aangepaste afbeelding voor uw aanwijzer. Dit kan wenselijker zijn als u ervoor wilt zorgen dat de gebruikerservaring identiek is op alle platforms (in plaats van de browser / besturingssysteem te laten beslissen wat uw wijzercursor eruit zou moeten zien). Merk op dat er fallback-opties kunnen worden toegevoegd voor het geval de afbeelding niet wordt gevonden, inclusief secundaire URL’s of een van de andere opties, dwz cursor:url(pointer.png,fallback.png,pointer);

Natuurlijk kunnen deze worden toegepast op de lijstitems op deze manier li{cursor:pointer;}, als een klasse .class{cursor:pointer;}, of als een waarde voor het stijlkenmerk van elk element style="cursor:pointer;".

Antwoord 15

Gebruik:

ul li:hover{
   cursor: pointer;
}

Voor meer muisgebeurtenissen, bekijk CSS-cursoreigenschap.

Antwoord 16

U kunt een van de volgende gebruiken:

li:hover
{
 cursor: pointer;
}

of

li
{
 cursor: pointer;
}

Werkvoorbeeld 1:

   li:hover
    {
     cursor: pointer;
    }
<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

Antwoord 17

Een HTML-hack gebruiken

Opmerking: dit wordt niet aanbevolen omdat het als een slechte gewoonte wordt beschouwd

Het inpakken van de inhoud in een ankertag die een href-attribuut bevat, werkt zonder expliciet de eigenschap cursor: pointer;toe te passen met het neveneffect van ankereigenschappen (aangepast met CSS ):

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

Antwoord 18

U kunt de onderstaande code gebruiken:

li:hover { cursor: pointer; }

Antwoord 19

Voor een basishandsymbool:

Probeer

cursor: pointer

Als je een handsymbool wilt, zoals een item slepen en neerzetten, probeer dan:

cursor: grab

Antwoord 20

U kunt ook de volgende stijl gebruiken:

li {
    cursor: grabbing;
}

Antwoord 21

gewoon CSS gebruiken om de cursoraanwijzer aan te passen


/* 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;

/* 2 URLs and coordinates, with a keyword fallback */
cursor: url(one.svg) 2 2, url(two.svg) 5 5, progress;

demo

Opmerking: cursorondersteuning voor veel formaatpictogrammen!

zoals .cur, .png, .svg, .jpeg, .webp, enzovoort

li:hover{
  cursor: url("https://cdn.xgqfrms.xyz/cursor/mouse.cur"), pointer;
  color: #0f0;
  background: #000;
}
/*
li:hover{
  cursor: url("../icons/hand.cur"), pointer;
}
*/
li{
  height: 30px;
  width: 100px;
  background: #ccc;
  color: #fff;
  margin: 10px;
  text-align: center;
  list-style: none;
}
<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

Antwoord 22

Controleer het volgende. Ik krijg het van w3schools . 

.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; }
<!DOCTYPE html>
<html>
<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>

Antwoord 23

<style>
.para{
    color: black;
}
.para:hover{
    cursor: pointer;
    color: blue;
}
</style>
<div class="para">

In de bovenstaande HTML-code wordt [:hover] gebruikt om aan te geven dat de volgende stijl alleen moet worden toegepast bij het zweven of het erop houden van de muiscursor.

Er zijn verschillende soorten cursors beschikbaar in CSS:

Bekijk de onderstaande code voor typen cursor:

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

Klik op de onderstaande link om te zien hoe de cursor-eigenschap werkt:

https://www.w3schools.com/cssref/tryit.asp ?filename=trycss_cursor

Antwoord 24

Je kunt het wijzigen met de muisaanwijzer of gewoon cursor:pointeropgeven bij het lijstitem, beide werken.

ul li {
  cursor: pointer;
}

Alternatief

ul li:hover {
  cursor: pointer;
}
Previous article“Initialiseren” variabelen in Python?
Next articleHoe kan ik een telefoonnummer valideren met PHP?

Other episodes

Stylingmat-select in hoekig materiaal

css Code Expert - 0
Hoe de paneelcomponent van mat-select op te maken. Uit de documenten die ik krijg dat ik panelClass moet leveren, maak ik het als volgt:...
Read more

Hoe maak je schaduw op de rand-onderkant?

css Code Expert - 0
Ik moet de randschaduw toepassen op border-bottom door CSS3. Ik wil alleen CSS3-schaduw onderaan toepassen. Is dit mogelijk? Antwoord 1, autoriteit 100% Probeer: div{ -webkit-box-shadow:0px 1px 1px #de1dde; ...
Read more

Beperk tekstlengte tot n regels met CSS

css Code Expert - 0
Is het mogelijk om een ​​tekstlengte te beperken tot "n" regels met behulp van CSS (of deze te knippen wanneer deze verticaal overloopt). text-overflow: ellipsis;werkt...
Read more

CSS-selector voor uitgeschakeld invoertype=”submit”

css Code Expert - 0
Is er een CSS-kiezer voor uitgeschakelde input type="submit"of "button"? Moet ik gewoon inputgebruiken? Werkt dat in IE6? Antwoord 1, autoriteit 100% Werkt dat in IE6? Nee, IE6 ondersteunt...
Read more

Chrome-afdrukwebsite, ontbrekende lay-outopties

css Code Expert - 0
Ik heb een website gemaakt en een deel van de site is ontworpen om in staande modus op tabloidpapier te worden afgedrukt. Het probleem...
Read more

Hoe gebruik je afbeeldingen in css met Webpack

css Code Expert - 0
Ik ben bezig met het maken van een React w/ Webpack-configuratie en heb moeite om te doen wat een eenvoudige taak lijkt te zijn....
Read more

Verschil tussen uitvul-inhoud versus uitlijn-items?

css Code Expert - 0
Ik vind het heel moeilijk om te begrijpen wat het verschil is? Uit mijn onderzoek blijkt dat justify-contentkan doen... space-betweenen space-around, terwijl align-itemskan doen......
Read more

© Copyright - Code Expert 2021