Se llama pseudo-selector y se usa para seleccionar todos los elementos cuando el usuario mueve el mouse sobre los elementos. Se puede utilizar en todo el elemento. Se debe declarar un elemento <!DOCTYPE html> en el documento para ver el funcionamiento de este selector en todos los elementos.
Ejemplo 1:
html
<!DOCTYPE html>
<html>
<head>
<title>a:hover in inline CSS</title>
<style>
h1 {
color:green;
}
body {
text-align:center;
}
a {
text-decoration:none;
color:green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>a:hover in inline CSS</h2>
<a href="#" onMouseOver="this.style.color='red'"
onMouseOut="this.style.color='green'" >GeeksforGeeks</a>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo usa JavaScript para mostrar un: contenido flotante en CSS. Se llama al atributo de evento onmouseover y onmouseout para mostrar el contenido a:hover.
html
<!DOCTYPE html>
<html>
<head>
<title>a:hover in inline CSS</title>
<style>
h1 {
color:green;
}
body {
text-align:center;
}
a {
text-decoration:none;
color:green;
}
</style>
<script>
function mouseover() {
document.getElementById("gfg").style.color = "red";
}
function mouseout() {
document.getElementById("gfg").style.color = "green";
}
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>a:hover in inline CSS</h2>
<a href = "#" id="gfg" onmouseover="mouseover()"
onmouseout="mouseout()">GeeksforGeeks</a>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con un: selector de desplazamiento se enumeran a continuación:
- Apple Safari 3.1
- Google Chrome 4.0
- Firefox 2.0
- Ópera 9.6
- Internet Explorer 7.0
CSS es la base de las páginas web, se usa para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA