Ejemplo
Seleccionar y el estilo de un enlace al pasar el ratón sobre ella:
a:hover
{
background-color: yellow;
}
Inténtalo tú mismo " Más "Try it Yourself" ejemplos a continuación.
Definición y Uso
El selector: libración se utiliza para seleccionar elementos al pasar el ratón sobre ellos.
Tip: El: Selector de vuelo estacionario se puede utilizar en todos los elementos, no sólo en los enlaces.
Tip: Utilice el : enlace selector para enlaces a páginas de estilo no visitados, el : visited selector para enlaces de estilo a las páginas visitadas, y el activo selector para estilizar el enlace activo.
Note: : libración debe venir después: link y: visited (if they are present) en la definición CSS, con el fin de ser eficaz!
| Versión: | CSS1 |
|---|
Soporte para el navegador
Los números de la tabla especifica 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 |
Note: En IE no debe declararse un <! DOCTYPE> para el: Selector de vuelo estacionario para trabajar en otros elementos que el <a> elemento.
sintaxis CSS
Más ejemplos
Ejemplo
Seleccione un estilo y <p>, <h1> y <a> elemento al pasar el ratón sobre ella:
p:hover, h1:hover, a:hover {
background-color: yellow;
} Inténtalo tú mismo " Ejemplo
Seleccione el estilo y no visitado, visitó, suspender, y los vínculos 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;
}
Inténtalo tú mismo " Ejemplo
enlaces de estilo con diferentes estilos:
a.ex1:hover, a.ex1:active {
color: red;
}
a.ex2:hover, a.ex2:active {
font-size: 150%;
}
Inténtalo tú mismo " Ejemplo
Pase el ratón sobre un <span> elemento para mostrar un <div> elemento (like a tooltip) :
div {
display: none;
}
span:hover + div {
display: block;
}
Inténtalo tú mismo " Ejemplo
Mostrar y ocultar un "dropdown" menú de cursor del 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;}
Inténtalo tú mismo " Páginas relacionadas
CSS tutorial: Enlaces CSS
CSS tutorial: clases CSS Pseudo