CSS : selector flotante
Ejemplo
Seleccione y aplique estilo a un enlace cuando pase el mouse sobre él:
a:hover
{
background-color: yellow;
}
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
El :hover
selector se usa para seleccionar elementos cuando pasa el mouse sobre ellos.
Sugerencia: el selector :hover se puede usar en todos los elementos, no solo en los enlaces.
Sugerencia: utilice el selector :link para diseñar enlaces a páginas no visitadas, el selector :visited para diseñar enlaces a páginas visitadas y el selector :active para diseñar el enlace activo.
Nota: :hover DEBE ir después de :link y :visited (si están presentes) en la definición de CSS, ¡para que sea efectivo!
Versión: | CSS1 |
---|
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el selector.
Selector | |||||
---|---|---|---|---|---|
:hover | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 |
Nota: En IE debe declararse un <!DOCTYPE> para que el selector :hover funcione en otros elementos que no sean el elemento <a>.
Sintaxis CSS
:hover {
css declarations;
}
Más ejemplos
Ejemplo
Seleccione y aplique estilo a un elemento <p>, <h1> y <a> cuando pase el mouse sobre él:
p:hover, h1:hover, a:hover {
background-color: yellow;
}
Ejemplo
Seleccione y diseñe enlaces no visitados, visitados, flotantes y activos:
/* unvisited link */
a:link {
color: green;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: red;
}
/* selected link */
a:active {
color: yellow;
}
Ejemplo
Enlaces de estilo con diferentes estilos:
a.ex1:hover, a.ex1:active {
color: red;
}
a.ex2:hover, a.ex2:active {
font-size: 150%;
}
Ejemplo
Pase el cursor sobre un elemento <span> para mostrar un elemento <div> (como una información sobre herramientas):
div {
display: none;
}
span:hover + div {
display: block;
}
Ejemplo
Mostrar y ocultar un menú "desplegable" al pasar el mouse:
ul {
display: inline;
margin: 0;
padding: 0;
}
ul li {display: inline-block;}
ul li:hover {background: #555;}
ul li:hover ul {display: block;}
ul li ul {
position: absolute;
width: 200px;
display: none;
}
ul li ul li {
background: #555;
display: block;
}
ul li ul li a {display:block !important;}
ul li ul li:hover {background: #666;}
páginas relacionadas
Tutorial CSS: Enlaces CSS
Tutorial CSS: Pseudoclases CSS