web-dev-qa-db-fra.com

Comment faire en sorte que le curseur se change en main lors du survol d'une balise <button>

Lors de l'affichage de mon site, le curseur ne se change que sur la main gantée pour <a> balises, pas <button> Mots clés. Y a-t-il une raison à cela?

Voici mon code (les balises button ont un identifiant de #more en css3).

 #more {
    background:none;
    border:none;
    color:#FFF;
    font-family:Verdana, Geneva, sans-serif;
}
cssmouse-cursor
48
Matt Murphy

voir: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

vous devez donc ajouter: cursor:pointer;

Dans votre cas, utilisez:

#more {
  background:none;
  border:none;
  color:#FFF;
  font-family:Verdana, Geneva, sans-serif;
  cursor:pointer;
}

Ceci appliquera le curseur à l'élément avec l'ID "plus" (ne peut être utilisé qu'une seule fois). Donc, dans votre utilisation HTML

<input type="button" id="more" />

Si vous souhaitez appliquer cela à plusieurs boutons, vous avez plusieurs possibilités:

en utilisant CLASS 

.more {
  background:none;
  border:none;
  color:#FFF;
  font-family:Verdana, Geneva, sans-serif;
  cursor:pointer;
}

et dans votre utilisation HTML

<input type="button" class="more" value="first" />
<input type="button" class="more" value="second" />

ou s'applique à un contexte HTML :

input[type=button] {
  background:none;
  border:none;
  color:#FFF;
  font-family:Verdana, Geneva, sans-serif;
  cursor:pointer;
}

et dans votre utilisation HTML

<input type="button" value="first" />
<input type="button" value="second" />
67
Thomas

Ajoutez simplement ce style:

cursor: pointer;

La raison pour laquelle cela ne se produit pas par défaut est que la plupart des navigateurs réservent le pointeur uniquement pour les liens (et peut-être quelques autres choses que j'oublie, mais généralement pas <button>s).

Plus sur la propriété cursor: https://developer.mozilla.org/en/CSS/cursor

J'applique généralement ceci à <button> et <label> par défaut.

[~ # ~] note [~ # ~] : Je viens de prendre ceci:

les balises button ont un identifiant de #more

Il est très important que chaque élément ait son propre unique id, vous ne pouvez pas avoir de doublons. Utilisez plutôt l’attribut class et changez votre sélecteur de #more à .more. C'est en fait une erreur assez commune qui est à l'origine de nombreux problèmes et questions posées ici. Plus tôt vous apprendrez à utiliser id, mieux ce sera.

20
Wesley Murch

Tout ce dont vous avez besoin est simplement d’utiliser l’un des attributs de CSS, qui est ---->

curseur: pointeur

il suffit d'utiliser cette propriété en css, peu importe son inline ou interne ou externe

par exemple (pour les CSS en ligne)

<form>
<input type="submit" style= "cursor:pointer" value="Button" name="Button">
</form>
6
Aashish
 #more {
    background:none;
    border:none;
    color:#FFF;
    font-family:Verdana, Geneva, sans-serif;
    cursor: pointer;
}
3
Lem Lordje Ko