Diferencias entre :hover :focus :target :checked usados en tabs 7.5.12
Diferencias entre :hover :focus :target :checked usados en tabs
Unos ejemplos de tabs (pestañas) para comparar el distinto comportamiento entre :hover :focus :target :checked. Pincha y compara:
Tab 3
Por @Kseso en Twitter
Tab 2
KsesoCss en Blogger
:hover no tiene mayor secreto. Pasar el curso por él y aparece, pero de la misma manera también desaparece.
Hover Tabs
No es permanente
Tab 3
KsesoCss en Blogger
Tab 2
Por @Kseso en Twitter
:focus Actúa al seleccionar (click) al elemento. Pero pierde la permanencia con sólo pinchar en cualquier parte de la página
Focus Tabs
No permite una selección previa.
:target el más comúnmente usado para demostraciones de pestañas (tabs). Su defecto, que produce un salto al seleccionar. En este ejemplo se ha evitado
Tab 2
Por @Kseso en Twitter
Tab 3
KsesoCss en Blogger
Target Tabs
Un elemento seleccionado por defecto
:cheked está libre de todos los males del resto, es una gozada trabajar con él. Pero tiene una pega: sólo trabaja con inputs.
Tab 2
Por @Kseso en Twitter
Tab 3
KsesoCss en Blogger
Checked Tabs
Permite seleccionar cualquier tab.
Y los códigos...
Sólo tienes que mirar el código fuente de este artículo, ahí los tienes, el html y el css. El css está al final del artículo, encerrado en su etiqueta <style />
Créditos y atribuciones
Las tabs me las encontré dando un paseo por csscience.com
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Buena entrada
ResponderEliminar