JMiur [E]

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>

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>

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>

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

8 comentarios:

Ciberwing  

qué entretenido, no conocía el efecto target ni menos que se pudiere enlazar dos elementos con ~

Responder
Unknown  

Encantador, ya no recuerdo la manera que coloqué los blogs que sigo, las etiquetas, es una excelente idea :D

Responder
angiluna3003  

me encanta jugar con el css de mi web, siempre hago experimentos a ver como queda en mi pagina, claro solo experimento, muchas cosas no las dejo obvio..

Responder
Unknown  

hola disculpa tengo un problema,, si tengo dos documentos, y kiero q al dar click en el segundo se oculte el primero como puedo hacer???? es urg
gracias de antemano

JMiur  

Hay varios ejemplos en la entrada. No sé a que denominas "documentos".

¿Urgente? mmmmm No creo que haya urgencias para estas cosas :D

Responder
Salvica  

He creado un botón con CSS y quiero que al pulsar llame a la pagina principal con ALGUNA de las variables de sesión en POST, algo así como simular el efecto de un form
Gracias

JMiur  

La mejor forma es usar el evento onclick; las posibilidades del CSS son escasas.

Responder
Unknown  

No logro que se expanda al hacer clic con el demo con focus, tengo mi pag separadas en div, me podrias ayudar?

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR