Impresiona a tus visitantes del sitio mediante la adición de efectos de rollover a sus páginas Web. Cascading Style Sheets le permiten modificar la apariencia de un hipervínculo sin utilizar código JavaScript. Muchos internautas están familiarizados con el efecto "underline". El efecto de subrayado se produce cuando su navegador subraya un hipervínculo al mover el ratón sobre él. El uso de CSS, puede agregar efectos de rollover adicionales a las páginas Web XHTML.
Instrucciones
1
Abra el documento XMTL el Bloc de notas o un editor HTML.
2
Agregue este código a la sección de "cuerpo" del documento:
<a href= "http://www.abc.com" class="underline"> Subrayado Efecto Rollover </a>
<a href="http://www.xyz.com" class="highlight"> destacado Efecto Rollover </a>
Esto crea dos hipervínculos. Cada hipervínculo hace referencia a una clase CSS diferente.
3
Agregue este código a la sección de "cabeza" del documento:
Style type = "text / css">
a.underline: link {text-decoration: none}
a.underline: activa {background-color: transparente; text-decoration: none}
a.underline: visitó {background-color: transparente; text-decoration: none}
a.underline: hover {background-color: transparente; text-decoration: underline}
Este código CSS define las propiedades de visualización para todos los hipervínculos que hacen referencia a la clase "underline". La última línea define la clase "libración". Propiedades que se configuran para esta clase determinan cómo un hipervínculo ve cuando un cursor del ratón sobre el hipervínculo. En este ejemplo, la propiedad "text-decoration" es "underline".
4
Agregue el siguiente código CSS por debajo del código que se muestra en el paso anterior:
a.highlight: link {background-color: transparente; text-decoration: none}
a.highlight: activa {background-color: transparente; text-decoration: none}
a.highlight: visited {background-color: transparente; text-decoration: none}
a.highlight: hover {background-color: amarillo; text-decoration: none}
</ STYLE>
El nombre de esta clase es "más destacado". Tenga en cuenta que "background-color" valor de la "libración" de etiqueta es "Amarillo". Esto hará que el color de fondo de un hipervínculo a cambiar a amarillo cuando el cursor del ratón se mueve sobre el hipervínculo.
5
Guarde el documento XHTML y abrirlo en su navegador. Mueva el cursor del ratón sobre la primera hipervínculo. El navegador subrayará el hipervínculo.
6
Mueva el cursor sobre el segundo hipervínculo. El navegador destacará el hipervínculo.
Consejos y advertencias
- Mediante la definición de propiedades de la clase "libración" CSS, puede crear una variedad de efectos de rollover. Usted podría incluso cambiar el color y el estilo de fuente mediante la aplicación de propiedades adicionales de fuentes CSS. (Recursos)