web-dev-qa-db-fra.com

CSS - Faire une div "cliquable"

Je voudrais savoir comment je peux rendre un div cliquable (comme un lien, avec la petite main quand je passe avec la souris).

J'ai des éléments comme celui-ci:

<div class="teamSelector">Some</div>

Avec ce jQuery:

$('.teamSelector').click(function() { 
    // some functions
});

À votre santé

javascriptjqueryhtmlcss
21
markzzz

Vous l'avez déjà rendu cliquable dans votre exemple. Si vous souhaitez qu'il "ressemble" à un clic, vous pouvez ajouter du CSS:

.teamSelector { cursor: pointer; }

Ou continuer avec jQuery:

.click(function() { do something }).css("cursor", "pointer");

Voici la référence d'écoles W3 pour la propriété curseur.

33
jthompson

Le css pour cela est:

.teamSelector
{
  cursor: pointer
}

Vous pouvez également ajouter des effets de survol, mais je ne sais pas si: actif fonctionnera sur plusieurs navigateurs.

Si vous avez besoin que quelque chose soit cliquable, vous feriez mieux d'utiliser un élément button ou a et de le styler. Vous pouvez toujours empêcher l'action par défaut avec javascript. La raison en est que c'est mieux pour l'accessibilité afin que les utilisateurs avec des lecteurs d'écran sachent qu'il y a quelque chose à interagir.

Modifier pour ajouter: Lorsque vous faites défiler une page, vous pouvez appuyer sur la barre d'espacement pour click un élément. Cela ne fonctionnera pas de la même façon sur les éléments non interactifs, de sorte que toute personne utilisant cette fonctionnalité ne pourra pas utiliser ce que vous créez.

4
zzzzBov

Tu ne peux pas juste, tu sais, en faire un lien et le styler? Ce serait plus facile et accessible.

3
Piskvor

cette question est assez ancienne mais nécessite quelques ajouts:

si vous souhaitez encapsuler un composant avec une interaction utilisateur basée sur un pointeur, vous devriez préférer l'élément button au lieu d'une div (vous pouvez toujours l'afficher block).

<button class="teamSelector" tabindex="1">Some</button>

modes:

.teamSelector{
    user-select: none; // this sets the element unselectable, unlike texts
    cursor: pointer; // changes the client's cursor
    touch-action: manipulation; // disables tap zoom delaying for acting like real button
    display: block; // if you want to display as block element
    background: transparent; //remove button style
    border: 0; //remove button style
}
2
mkg

Nous pouvons montrer un élément div cliquable simplement en ajoutant style = curseur: 'pointeur'. Par exemple:

  <div style="cursor: pointer;">edit</div>

Il apportera une petite main lorsque nous allons sur l'élément div avec la souris.

0
Akash Jain