javascript - que - CSS-Hacer un div "hacer clic"

ocultar menú al pulsar fuera de él

Question

Me gustaría saber cómo puedo hacer un div pulsable (como un enlace, con la mano pequeña cuando voy con el mouse).

Tengo algunos elementos como este:

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

Con esta jQuery:

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

Aclamaciones

Answer 1

¿No puedes simplemente, ya sabes, convertirlo en un enlace y diseñarlo? Sería más fácil y accesible.

Answer 2

El css para ello es:

.teamSelector
{
  cursor: pointer
}

También puede agregar efectos de desplazamiento, pero no estoy seguro de si: active funcionará en todos los navegadores.

Si necesitas algo para poder hacer clic, es mejor que uses un button o a elemento y estiliza eso. Siempre se puede evitar la acción por defecto con javascript. La razón por la que es mejor es por la accesibilidad para que los usuarios con lectores de pantalla sepan que hay algo con lo que interactuar.

Editar para agregar: cuando pase por una página, puede golpear la barra espaciadora para click un elemento. Esto no funcionará de la misma manera en elementos no interactivos, por lo que cualquier persona que use esa funcionalidad no podrá usar lo que sea que esté creando.

Answer 3

Podemos mostrar el elemento div pulsable simplemente agregando style = cursor: ''pointer''. por ejemplo:

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

Traerá una pequeña mano cuando repasemos el elemento div con el ratón.

Answer 4

Ya lo has hecho clic en tu ejemplo. Si desea que "haga clic" en un clic, puede agregar algo de CSS:

.teamSelector { cursor: pointer; }

O continuando con jQuery:

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

Aquí está la referencia de las escuelas W3 para la propiedad del cursor.

Answer 5

esta pregunta es bastante antigua pero necesita algunas adiciones:

Si desea envolver el componente con una interacción de usuario basada en punteros, debe preferir el elemento de botón en lugar de un div (aún puede mostrarlo en block ).

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

estilos:

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