Blog - Tadek Chávez

Tags: CSS | Web

Ejemplo (coloca el puntero sobre el botón):

Para que esto suceda, es importante que el <div> que se haré visible/invisible (aquí lo llamaremos <div> intermitente)  sea descendente (o sea que este contenido dentro de) del <div> sobre el que se pasará el puntero del mouse (lo llamaremos <div> contenedor) y tendrá definida la pseudoclase CSS llamada :hover. Aquí un ejemplo de como se verían los divs con bordes, solo para que se vean el acomodo de las cajas.

El código html para generar estos divs sería:

<div id="div_contenedor">
  <div id="div_intermitente">
    este texto está dentro del <div> intermitente.
  </div>
</div> 

Y para mostrar la imagen y los colores necesitamos un poco de css, algo como esto funcionará:

#div_contenedor{
    background: url("../images/tick.jpg") left center no-repeat;
    min-height: 60px;
    width: 53%;
    margin:auto;
}

#div_contenedor:hover{
    background: url("../images/tick_hover.jpg") left center no-repeat;
}

#div_intermitente{
    display:none;
    position: relative;
    margin-left: 65px;
    top:20px;
    padding:5px;
}

#div_contenedor:hover #div_intermitente{
    display:inline;
    background-color: #d97900;
} 

 En el selector #div_intermitente está la declaración de display:none; la cuál define que de manera predeterminada este div no estará visible, posteriormente con el selector de identificador #div_contenedor:hover #div_intermitente que es presentado al momento de pasar el puntero del mouse encima del div_contenedor declaramos display:inline que en ese momento mostrará el div y asignará un color de fondo a este.

---

Comparte este artículo en tu red social preferida.