Efectos de color Rollover CSS

El uso de un vuelco Cascading Style Sheets, o por encima del ratón, efecto de color se puede añadir a la estética de su sitio web y ayudar a dar énfasis a los elementos. Se puede especificar un efecto de color de vuelco para ayudar a los usuarios hacen clic en el enlace correcto o elemento de menú, por ejemplo. El CSS pseudo-elemento "estacionario" es una manera de añadir efectos de conversión de su sitio web.

Fondo

Un efecto básico CSS rollover es cambiar el color de fondo del elemento. Puede especificar este efecto para los enlaces de texto y un color de fondo diferente aparecerá directamente detrás del texto. Si se aplica fondo efectos de activación a un elemento más grande, como un elemento de celda de tabla o lista, un rectángulo más grande va a cambiar el color de fondo cuando su visitante se cierne sobre el contenido del elemento.

Color de texto

También puede cambiar sólo el color del texto de vuelco. Esta es una práctica común cuando se está styling hipervínculos, anclas. Puede utilizar un efecto hover sutil y cambiar de una luz de color púrpura oscuro, por ejemplo. Un efecto más drástico vuelco podría implicar cambiar un enlace de texto o de rojo a azul al pasar el ratón. Cuando el visitante se quita el ratón de la imagen, el color regresa originales.

Frontera

No sólo se puede especificar el fondo y enlace de texto o colores al vuelco, pero se puede cambiar el color del borde y estilo con CSS. Usted puede simplemente cambiar el borde de un color a otro o puede aumentar o disminuir el ancho de la frontera. Para lograr un efecto dramático vuelco en especial, puede combinar los cambios de color con cambios de estilo de frontera. Por ejemplo, puede especificar una inserción o estilo de borde principio para permitir que un elemento, como enlace, verá como un botón sin el uso de imágenes. El cambio de este recuadro de entrada, o viceversa, al vuelco crea la apariencia de un botón que se presiona.

Diverso

Otros efectos de color de vuelco incluyen cambiar el color de una línea por encima o por debajo de su elemento. Estas líneas, especialmente subrayados, son comunes para los enlaces de texto o imagen. Se puede especificar el color de esta línea con CSS. Además de esto, se puede elegir entre estilos que van del sólido al de puntos de líneas discontinuas. CSS también es compatible con la capacidad de crear un color, subrayado doble.