Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.
CSS: Selector de desplazamiento
Este tutorial de CSS explica cómo usar los selectores de CSS llamados : deambulando Con sintaxis y ejemplos.
describir
El selector CSS :hover le permite apuntar a los elementos sobre los que el usuario pasa el cursor o el puntero del mouse.
sintaxis
La sintaxis para el selector :active CSS es:
element:hover { style_properties }
parámetro o parámetro
elemento El elemento que se colocará cuando el usuario se desplace sobre él. style_properties Estilos CSS aplicados a los elementos cuando el usuario se desplaza sobre el elemento.
notas
- El selector :hover es una pseudoclase que le permite posicionar el elemento sobre el que se desplaza el cursor o el puntero del mouse.
- Difícil de aplicar el selector :hover en dispositivos táctiles.
- A partir de IE4, el selector :hover solo se puede usar con Las etiquetas se usan juntas. Desde IE7, el selector :hover puede usarse en todos los elementos.
Compatibilidad del navegador
El selector CSS :hover tiene soporte básico para los siguientes navegadores:
- Aleación de cromo
- Firefox (Geco)
- Navegador de Internet (IE)
- ópera
- Safari (WebKit)
ejemplo
Discutiremos el selector :hover a continuación, explorando un ejemplo de cómo usar este selector en CSS para aplicar estilos a elementos flotantes.
con Etiqueta
Veamos un ejemplo de CSS :hover donde aplicamos el :hover selector a Etiqueta.
CSS se ve así:
a:hover { color: white; background: blue; }
HTML se ve así:
<div>
<p>Here is a great site: <a href="https://www.checkyourmath.com/index.php">CheckYourMath.com</a></p>
</div>
Cuándo Cuando la etiqueta no se desplaza, se ve así:
Luego, una vez que pasas el cursor sobre etiqueta, el selector :hover será El marcador tiene el siguiente estilo:
En este ejemplo de :hover, el enlace “CheckYourMath.com” solo aparece como texto blanco con fondo azul cuando se pasa el cursor o el puntero del mouse.
con
Etiqueta
Veamos un ejemplo de CSS :hover donde aplicamos el :hover selector a
Etiqueta.
CSS se ve así:
div:hover { background: yellow; }
HTML se ve así:
<div>
<p>TechOnTheNet.com has been providing helpful references, how-to's and FAQs since 2003. We focus on technologies such as Microsoft Access, Microsoft Excel, Microsoft Word, SQL, Oracle/PLSQL, MySQL, HTML, CSS, and the C Language.</p>
</div>
<div>
<p>The information presented here is suitable for all programmers from beginner to expert. We hope you find this information useful and return to our site, as we expand our information base.</p>
</div>
Cuándo
Cuando la etiqueta no se desplaza, se ve así:
Luego, una vez que pasas el cursor sobre
en una de las etiquetas, el selector :hover establecerá
El estilo del marcador, de la siguiente manera:
En este ejemplo de :hover, nos desplazamos sobre el segundo
etiqueta, esto hace que el selector :hover
el estilo se establece en un fondo amarillo.
(Visited 14 times, 1 visits today)
Veamos un ejemplo de CSS :hover donde aplicamos el :hover selector a
CSS se ve así:
div:hover { background: yellow; }
HTML se ve así:
<div>
<p>TechOnTheNet.com has been providing helpful references, how-to's and FAQs since 2003. We focus on technologies such as Microsoft Access, Microsoft Excel, Microsoft Word, SQL, Oracle/PLSQL, MySQL, HTML, CSS, and the C Language.</p>
</div>
<div>
<p>The information presented here is suitable for all programmers from beginner to expert. We hope you find this information useful and return to our site, as we expand our information base.</p>
</div>
Cuándo
Luego, una vez que pasas el cursor sobre
En este ejemplo de :hover, nos desplazamos sobre el segundo