Cómo trabajar con los selectores de sucesos css3

La mayoría de los cambios son estáticas CSS3 - le pide al navegador para buscar etiquetas específicas, atributos o patrones. Sin embargo, selectores de sucesos eligen objetos en función de un evento en particular, tales como un ratón sobre.

Video: #7 Selectores de Atributo - Curso de CSS3 desde cero

Cuando el usuario pasa el puntero del ratón sobre un objeto, los cambios de formato del objeto para significar que se ha producido el evento. Cuando el usuario mueve el puntero del ratón fuera del objeto, el formato vuelve a la normalidad. La siguiente lista le informa acerca de selectores de sucesos que los documentos utilizan comúnmente.

• :flotar: Selecciona un objeto cuando el puntero del ratón sobre él. Los desarrolladores utilizan habitualmente esta función para mostrar que se selecciona un elemento o para visualizar detalles sobre un objeto. Ves esta característica se utiliza muy a menudo con sistemas de menú para mostrar los elementos del submenú.

• :atención: Selecciona un objeto cuando el objeto tiene el foco (teclado) de entrada. Es comúnmente usado con formas para mostrar qué campo se selecciona para la entrada. Un uso interesante de este selector es mostrar el campo seleccionado en una fuente de mayor tamaño para hacer más fácil la entrada.

selectores de sucesos son muy útiles porque se puede utilizar para hacer que aparezca la página está interactuando con el usuario sin necesidad de escribir ni una línea de código. Todo ocurre como parte de un estilo. El procedimiento siguiente muestra una forma de utilizar selectores de sucesos para producir un efecto visual.

1. crear el ExternalCSS.HTML archivos y ExternalCSS.CSS y copiarlos a una nueva carpeta.

2. ExternalCSS.CSS abierta.

3. Escriba el siguiente código después de los estilos existentes y guardar los cambios en el disco.

   Video: MOOC Introducción al Desarrollo Web, parte 2 - CSS: selectores CSS3 - Actívate

   P: libración, h1: hover {text-decoration: none; font-family: "Arial", Sans-serif-font-size: xx-large-color: Blueviolet-background-color: ciruela}

4. Actualizar la página de prueba.

   Video: MOOC Introducción al Desarrollo Web, parte 2 - 1.9 CSS: selectores básicos (1) - Actívate

5. Pase el puntero del ratón sobre el texto del párrafo.

   Se ve el efecto de hacer que el cambio de estilo. El estilo de los cambios en el texto para que coincida con los criterios de selección.

   

6. Pase el ratón sobre el texto del encabezado.

   El texto del párrafo vuelve a la normalidad y el texto del encabezado ahora coincide con los criterios de selección. Puede utilizar este método con cualquier objeto en la pantalla y hacer cualquier tipo de cambio deseado.