En este artículo, veremos cómo configurar el estilo del cursor para cualquier dirección usando CSS. Este estilo se puede crear utilizando la propiedad de cursor de desplazamiento completo . Esta propiedad establece el cursor que indica cualquier dirección de desplazamiento usando CSS. El valor de la propiedad de desplazamiento total indica que algo se puede desplazar en cualquier dirección.
Sintaxis:
cursor: all-scroll;
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#all-scroll {
cursor: all-scroll;
}
</style>
</head>
<body>
<h1 style="color: green">
Welcome to GeeksforGeeks
</h1>
<h2 style="font-family: Impact" id="all-scroll">
Mouse over here to change the
mouse cursor.
</h2>
</body>
</html>
Producción:
Ejemplo 2: podemos usar el valor de propiedad de movimiento para establecer el estilo del cursor.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.gfg {
color: green;
font-size: 50px;
}
#all-scroll {
cursor: all-scroll;
}
#move {
cursor: move;
}
</style>
</head>
<body>
<h1 style="color: green">
Welcome to GeeksforGeeks
</h1>
<h2 id="all-scroll">
Mouse over here to change the
mouse cursor using <small class="gfg">
all-scroll</small> property.
</h2>
<h2 id="move">
Mouse over here to change the mouse
cursor using <small class="gfg">move
</small> cursor property.
</h2>
</body>
</html>
Producción:
Navegadores compatibles:
- Google Chrome
- Borde
- Mozilla Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA