Cómo usar un contenedor DIV HTML para un efecto hover

Escrito por matthew weeks | Traducido por daniel gómez villegas
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo usar un contenedor DIV HTML para un efecto hover
Puedes cambiar el estilo de un contenedor DIV al posar sobre él con un evento onMouseOver. (Comstock/Comstock/Getty Images)

Un elemento fundamental de una página web atractiva es el uso de elementos de estilo HTML y contenedores DIV. Con ellos puedes liberarte de las limitaciones de diseño de las tablas tradicionales, y crear casi cualquier diseño visual que puedas imaginar. Además, mediante el uso de operadores de JavaScript, puedes cambiar los estilos asociados con un contenedor DIV cuando una acción como un puntero de ratón se pose sobre él. El proceso es simple, requiriendo sólo crear dos clases separadas de estilos y colocando un operador dentro de la etiqueta del contenedor para cambiar entre ellos.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Abre la página web con el contenedor DIV cuyo estilo deseas cambiar en tu editor de texto preferido.

  2. 2

    Inserta dos nuevas clases dentro de la etiquetas de apertura y cierre de <head> de tu página web. Asígnales el estilo predeterminado para tu contenedor DIV y el estilo que desees que tenga cuando se pose el ratón encima. Por ejemplo, supón que tienes un contenedor DIV con el texto negro que deseas cambiar a rojo cuando se pose el ratón encima. Podrías insertar el siguiente código:

    <style type="text/css"> .defaultDIVstyle {color:#000000;} .hoverDIVstyle {color:#FF0000;} </style>

    Sustituye los nombres de tus clases preferidas por defaultDIVstyle y hoverDIVstyle.

  3. 3

    Coloca el nombre de la clase predeterminada para la etiqueta del contenedor DIV en cuestión. Para el ejemplo anterior, deberás añadir el siguiente código a la etiqueta DIV:

    class="defaultDIVstyle"

  4. 4

    Adjunta un evento onMouseOver al contenedor DIV para cambiar el nombre de la clase a su estilo hover, de la siguiente manera:

    onMouseOver="this.classname='hoverDIVstyle';"

  5. 5

    Adjunta un evento onMouseOut al contenedor DIV para cambiar el nombre de la clase de nuevo al valor predeterminado cuando el puntero se desplace fuera de el, de la siguiente manera:

    onMouseOut="this.classname='defaultDIVstyle';"

    La etiqueta de tu contenedor DIV debería verse así:

    <div class="defaultDIVstyle" onMouseOver="this.classname='hoverDIVstyle';" onMouseOut="this.classname='defaultDIVstyle';">

  6. 6

    Guarda y publica tu página web. Tu contenedor DIV ahora cambiará el texto de negro a rojo cuando se pose el mouse sobre él, y volverá a negro cuando el puntero del ratón se mueva fuera de él.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles