Cómo - Mostrar un elemento al pasar el mouse
Aprenda a mostrar un elemento al pasar el mouse.
Pasa el cursor sobre mí.
I am shown when someone hovers over the div above.
Cómo mostrar un elemento al pasar el mouse
Paso 1) Agregar HTML:
Ejemplo
<div class="myDIV">Hover over me.</div>
<div class="hide">I am shown when
someone hovers over the div above.</div>
Paso 2) Agregar CSS:
Ejemplo
.hide {
display: none;
}
.myDIV:hover + .hide {
display: block;
color: red;
}
Ejemplo explicado
El selector de hermanos adyacentes ( +
) selecciona todos los elementos que son hermanos adyacentes de un elemento específico.
La palabra "adyacente" significa "inmediatamente después", y el ejemplo anterior selecciona todos los elementos con class=".hide"
, que se colocan inmediatamente después de los elementos con class=".myDIV
", al pasar el mouse.
Vaya a nuestro tutorial de combinadores de CSS para obtener más información sobre los selectores adyacentes.