CSS - Fai un div "cliccabile"

Question

Mi piacerebbe sapere come posso renderizzare un div cliccabile (come un link, con la piccola mano quando passo con il mouse).

devo alcuni elementi come questo:

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

Con questo jQuery:

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

Acclamazioni

Answer 1

Hai già reso cliccabile nel tuo esempio. Se desiderate a "look" cliccabile, è possibile aggiungere un po 'di CSS:

.teamSelector { cursor: pointer; } 

o continuare con jQuery:

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

Here is la scuola W3 di riferimento per la proprietà del cursore.

Answer 2

Non puoi semplicemente, sai, creare un collegamento e stile? Sarebbe più facile e accessibile.

Answer 3

il CSS perché è:

.teamSelector 
{ 
    cursor: pointer 
} 

È anche possibile aggiungere effetti al passaggio del mouse, ma non sono sicuro se: attiva lavorerà cross-browser.

Se hai bisogno di qualcosa per essere cliccabile, è meglio usare un elemento button o a e lo stile. Puoi sempre impedire l'azione predefinita con javascript. Il motivo per cui è migliore è l'accessibilità in modo che gli utenti con screen reader sappiano che c'è qualcosa con cui interagire.

Modifica da aggiungere: Quando si sfoglia una pagina, è possibile premere la barra spaziatrice su click un elemento. Questo non funzionerà allo stesso modo su elementi non interattivi, quindi chiunque usi quella funzionalità non sarà in grado di usare quello che stai facendo.

Answer 4

questa domanda è piuttosto vecchio, ma ha bisogno di alcune aggiunte:

se si vuole avvolgere componente con l'interazione dell'utente puntatore-based, si dovrebbe preferire elemento pulsante al posto di un div (è comunque possibile visualizzarlo block).

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

stili:

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