Faire du curseur une main lorsqu'un utilisateur survole un élément de la liste
J'ai une liste et j'ai un gestionnaire de clics pour ses éléments:
<ul>
<li>foo</li>
<li>goo</li>
</ul>
Comment puis-je changer le pointeur de la souris en un pointeur de la main (comme lorsque vous survolez un bouton)? À l'heure actuelle, le pointeur se transforme en un pointeur de sélection de texte lorsque je survole les éléments de la liste.
Comme les gens l'ont mentionné, compte tenu du temps qui passe, vous pouvez désormais utiliser en toute sécurité:
li { cursor: pointer; }
Utiliser pour li:
li:hover {
cursor: pointer;
}
Voir plus de propriétés de curseur avec des exemples après avoir exécuté l'option de fragment:
.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>Vous n'avez pas besoin de jQuery pour cela, utilisez simplement le contenu CSS suivant:
li {cursor: pointer}
Et voilà! Pratique.
Utilisation:
li:hover {
cursor: pointer;
}
D'autres valeurs valides (dont hand est et non ) pour la spécification HTML actuelle peuvent être affichées ici .
Utilisation
cursor: pointer;
cursor: hand;
si vous voulez avoir un résultat crossbrowser!
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; }
Vous pouvez également avoir le curseur soit une image:
.img-cur {
cursor: url(images/cursor.png), auto;
}
li:hover {cursor: hand; cursor: pointer;}
Je pense qu’il serait judicieux d’afficher le curseur main/pointeur uniquement lorsque JavaScript est disponible. Ainsi, les gens n'auront pas le sentiment de pouvoir cliquer sur quelque chose qui ne peut pas être cliqué.
Pour cela, vous pouvez utiliser la librairie JavaScript jQuery pour ajouter le CSS à l’élément comme
$("li").css({"cursor":"pointer"});
Ou chaînez-le directement au gestionnaire de clics.
Ou quand modernizer en combinaison avec <html class="no-js"> est utilisé, le CSS ressemblerait à ceci:
.js li { cursor: pointer; }
Pour un navigateur complet, utilisez:
cursor: pointer;
cursor: hand;
Juste pour être complet:
cursor: -webkit-grab;
Il vous donne également un coup de main, celui que vous connaissez lorsque vous déplacez la vue d’une image.
C'est très utile si vous voulez émuler le comportement de capture en utilisant jQuery et mousedown.
Faites simplement quelque chose comme ceci:
li {
cursor: pointer;
}
Je l'applique sur votre code pour voir comment cela fonctionne:
li {
cursor: pointer;
}<ul>
<li>foo</li>
<li>goo</li>
</ul>Remarque: Aussi NE PAS FAIRE oubliez que vous pouvez avoir n'importe quel curseur avec un curseur personnalisé, vous pouvez créer une icône pour la main fav comme celle-ci, par exemple:
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>ul li:hover{
cursor: pointer;
}
Pour pouvoir faire n'importe quoi obtenir le traitement "mousechange", vous pouvez ajouter une classe CSS:
.mousechange:hover {
cursor: pointer;
}<span class="mousechange">Some text here</span>Je ne dirais pas qu'il faille utiliser cursor:hand car il n'était valable que pour Internet Explorer 5.5 et versions antérieures, et Internet Explorer 6 était fourni avec Windows XP (2002). Les gens ne pourront se mettre à niveau que lorsque leur navigateur ne fonctionne plus pour eux. En outre, dans Visual Studio, cette entrée est soulignée en rouge. Il me dit:
Validation (CSS 3.0): "hand" n'est pas une valeur valide pour la propriété "cursor"
Toutes les autres réponses suggèrent d'utiliser le pointeur CSS standard. Cependant, il existe deux méthodes:
Appliquez la propriété CSS
cursor:pointer;aux éléments. (C'est le style par défaut lorsqu'un curseur survole un bouton.)Appliquez la propriété CSS
cursor:url(pointer.png);à l'aide d'un graphique personnalisé pour votre pointeur. Cela peut être plus souhaitable si vous voulez vous assurer que l'expérience utilisateur est la même sur toutes les plateformes (au lieu de laisser le navigateur/système d'exploitation décider de l'apparence de votre curseur de pointeur). Notez que des options de secours peuvent être ajoutées au cas où l’image ne serait pas trouvée, y compris des URL secondaires ou l’une des autres options, par exemplecursor:url(pointer.png,fallback.png,pointer);.
Bien entendu, ceux-ci peuvent être appliqués aux éléments de la liste de cette manière li{cursor:pointer;}, en tant que classe .class{cursor:pointer;} ou en tant que valeur pour l'attribut style de chaque élément style="cursor:pointer;".
Utilisation:
ul li:hover{
cursor: pointer;
}
Pour plus d'événements de souris, cochez propriété du curseur CSS .
Vous pouvez utiliser l'un des éléments suivants:
li:hover
{
cursor: pointer;
}
ou
li
{
cursor: pointer;
}
Exemple de travail 1:
li:hover
{
cursor: pointer;
}<ul>
<li>foo</li>
<li>bar</li>
</ul>Exemple de travail 2:
li
{
cursor: pointer;
}<ul>
<li>foo</li>
<li>bar</li>
</ul>Pour un symbole de base de la main:
Essayer
cursor: pointer
Si vous voulez un symbole de la main comme glisser un objet et le déposer, essayez:
cursor: grab
Vous pouvez également utiliser le style suivant:
li {
cursor: grabbing;
}
Utiliser un hack HTML
Note: ceci n'est pas recommandé car c'est considéré comme une mauvaise pratique
Envelopper le contenu dans une balise d'ancrage contenant un attribut href fonctionnera sans appliquer explicitement la propriété cursor: pointer; à l'effet secondaire des propriétés d'ancrage (modifié avec CSS):
<a href="#" style="text-decoration: initial; color: initial;"><div>This is bad practice, but it works.</div></a>Vous pouvez utiliser le code ci-dessous:
li:hover { cursor: pointer; }
Vérifiez les points suivants. Je le reçois de 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>
juste en utilisant CSS pour définir personnaliser le pointeur du curseur
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;
démo
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
image main.cur
li:hover{
cursor: url("../icons/hand.cur"), pointer;
}