in

CSS: selector de desplazamiento

Ejemplo

Selecciona y aplica estilo a un enlace cuando pasas el mouse sobre él:

a: hover {
color de fondo: amarillo;
}

Inténtalo tú mismo »

Más ejemplos de «Pruébelo usted mismo» a continuación.


Definición y uso

los :hover selector se usa para seleccionar elementos cuando pasa el mouse sobre ellos.

Propina: El selector: hover se puede utilizar en todos los elementos, no solo en los enlaces.

Propina: Utilice el selector de enlaces: para aplicar estilos a los enlaces a páginas no visitadas, el selector: visitados para aplicar estilos a los enlaces a las páginas visitadas y el selector: active para aplicar estilos al enlace activo.

Nota: : hover DEBE ir después de: link y: visitado (si están presentes) en la definición de CSS, para que sea efectivo.


Soporte del navegador

Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el selector.

Selector
:flotar 4.0 7.0 2.0 3.1 9,6

Nota: En IE debe declararse un para que el selector: hover funcione en otros elementos que no sean el elemento .


Sintaxis CSS

: hover {
declaraciones css;
} Demo



Más ejemplos

Ejemplo

Seleccione y aplique estilo a los enlaces activos, no visitados, activos y no visitados:

/ * enlace no visitado * /
un enlace {
color verde;
}

/ * enlace visitado * /
a: visitado {
color verde;
}

/ * mouse sobre el enlace * /
a: hover {
color rojo;
}

/ * enlace seleccionado * /
a: active {
color amarillo;
}

Inténtalo tú mismo »

Ejemplo

Enlaces de estilo con diferentes estilos:

a.ex1: hover, a.ex1: active {
color rojo;
}

a.ex2: hover, a.ex2: active {
tamaño de fuente: 150%;
}

Inténtalo tú mismo »

Ejemplo

Desplácese sobre un elemento para mostrar un elemento

(como una información sobre herramientas):

div {
pantalla: ninguna;
}

span: hover + div {
bloqueo de pantalla;
}

Inténtalo tú mismo »

Ejemplo

Mostrar y ocultar un menú «desplegable» al pasar el mouse:

ul {
pantalla: en línea;
margen: 0;
acolchado: 0;
}
ul li {pantalla: bloque en línea;}
ul li: hover {background: # 555;}
ul li: hover ul {display: block;}
ul li ul {
posición: absoluta;
ancho: 200px;
pantalla: ninguna;
}
ul li ul li {
fondo: # 555;
bloqueo de pantalla;
}
ul li ul li a {pantalla: bloque! importante;}
ul li ul li: hover {background: # 666;}

Inténtalo tú mismo »


páginas relacionadas

Tutorial de CSS: enlaces CSS

Tutorial de CSS: pseudoclases de CSS

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Descargas de Java ME SDK

linux home directory

Directorio de inicio de Linux – javatpoint