Eventos click y CSS

Un evento es eso que ocurre ... cuando hacemos algo. En CSS, el más común es el hover; ponemos el cursor encima de una etiqueta y, automáticamente, se ejecuta el evento<. No es algo controlable, se ejecuta siempre y, que lo usemos o no, es otra historia. Bueno, en realidad, hay una forma de eludirlo ya que en los navegadores modernos hay una propiedad llamada pointer-events que nos permite deshabilitarlos. Por ejemplo si tuviéramos un enlace al que le adosamos esa propiedad, simplemente, no funcionaría:

<a href="url_pagina" style="pointer-events: none;"> click acá </a>

click acá

Si bien :hover es el más común, no es el único pero, no existe ninguno que reaccione ante un click. El CSS, por alguna razón, jamás ha tenido algo semejante y ese tipo de acciones sólo pueden hacerse con JavaScript.

Sin embargo, hay algunas alternativas; ninguna de ellas es perfecta pero, por ahora, no hay muchas más. La mayoría utiliza :target para que funcione, algo que se ve bien en un demo sencillo pero, en cuanto lo queremos aplicar es poco funcional ya que en una página completa ... se "moverá", cambiando la url:

<style>
#democlick1 {display: none;}
#democlick1:target {display: block;}
</style>

<a href="#democlick1">demo con target</a>

<div id="democlick1">
  ....... cualquier contenido .......
</div>

demo con target

Morbi ac nunc quis nisi tincidunt mattis eu gravida libero. Cras risus dui, scelerisque non fringilla eu; bibendum nec eros! Sed sed libero sed quam cursus adipiscing id non nisl. Praesent nisl turpis, sollicitudin eget placerat at, malesuada vitae ligula? Aenean est felis, fermentum non condimentum nec, consequat et nisl. Vivamus ultrices ligula at augue pulvinar adipiscing a vitae risus. Vivamus fermentum libero eget mi cursus condimentum vel nec neque? Praesent quis metus.

Otra alternativa es utilizar :focus; en este caso, al hacer click, se expandirá el contenido oculto.

<style>
.democlick2 {display: none;}
span:focus ~ .democlick2 {display: block;}
</style>

<span tabindex="0">demo con focus</span>
<div class="democlick2">
  ....... cualquier contenido .......
</div>

Tiene dos ventajas con respecto al anterior, por un lado, la página se queda quieta y, podemos aplicarlo a una clase lo que nos permite poner varios sin necesidad de identificarlos pero ... tiene dos desventajas; para volverlo a cerrar, debemos hacer click en cualquier parte "afuera" y además, el contenido oculto debe estar inmediatamente después, sin etiquetas intermedias:

demo con focus

Morbi ac nunc quis nisi tincidunt mattis eu gravida libero. Cras risus dui, scelerisque non fringilla eu; bibendum nec eros! Sed sed libero sed quam cursus adipiscing id non nisl. Praesent nisl turpis, sollicitudin eget placerat at, malesuada vitae ligula? Aenean est felis, fermentum non condimentum nec, consequat et nisl. Vivamus ultrices ligula at augue pulvinar adipiscing a vitae risus. Vivamus fermentum libero eget mi cursus condimentum vel nec neque? Praesent quis metus.

otro demo con focus

....... otro distinto .......

El último método es mas sofisticado y requiere más etiquetas pero es el que funciona mejor ya que nos permite generar un efecto toggle, es decir, click y expandir y click contraer. En este caso, se usa :checked:

<style>
.democlick3 {display: none;}
:checked ~ .democlick3 {display: block;}
input.oculto[type=checkbox] {position: absolute;left: -999em;}
</style>

<label for="toggle-oculto1">demo con checked</label>
<input type="checkbox" id="toggle-oculto1" class="oculto" />
<div class="democlick3">
....... cualquier contenido .......
</div>

demo con checked

Morbi ac nunc quis nisi tincidunt mattis eu gravida libero. Cras risus dui, scelerisque non fringilla eu; bibendum nec eros! Sed sed libero sed quam cursus adipiscing id non nisl. Praesent nisl turpis, sollicitudin eget placerat at, malesuada vitae ligula? Aenean est felis, fermentum non condimentum nec, consequat et nisl. Vivamus ultrices ligula at augue pulvinar adipiscing a vitae risus. Vivamus fermentum libero eget mi cursus condimentum vel nec neque? Praesent quis metus.

REFERENCIAS:vanseo design