CSS | puntero-eventos Propiedad : Aquí, vamos a aprender acerca de la propiedad puntero-eventos con ejemplos en CSS .
CSS | puntero-eventos Propiedad
Punteros son los cursores del ratón sobre la página web que se usan para navegar y haga clic en una opción.
Sí, punteros también pueden ser formateados específicamente. Si usted planea en la talla de cada detalle de su página web a continuación, usted no debe olvidarse de punteros. Para hacer frente a los punteros usamos la propiedad de puntero-eventos en el CSS.
El propiedad puntero-eventos en el CSS permite controlar cómo se supone que los elementos de reaccionar a los eventos del ratón / táctiles. También especifica si el cursor está visible.
Esos son absolutamente un montón de características. Vamos a las entendemos con el siguiente ejemplo,
Sintaxis:
Element {
pointer-event: none|auto;
}
puntero-eventos valores de las propiedades
1) auto
Si sumamos automático como prefijo a algo, asume que la funcionalidad sería automática, lo cual es muy cierto la mayor parte del tiempo. El class es lo mismo aquí, los elementos reacciona a los eventos de puntero, como cuando nos Pase el ratón sobre un elemento. con lo que el automático un class propiedad de punteros en eventos .
Bueno, ¿por qué parada en la definición? Vaya por delante y tratar el siguiente ejemplo mencionado,
Sintaxis:
Element {
pointer-event: auto;
}
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
div {
pointer-events: auto;
}
</style>
</head>
<body>
<h2>Pointer-events in CSS</h2>
<div>Go to <a href="https://www.includehelp.com/">IncludeHelp</a></div>
</body>
</html>
salida
En el ejemplo anterior, la libración una y clic el enlace «IncludeHelp» para ver el efecto en el ejemplo anterior,
2) ninguno
«ninguna» se utiliza cuando no queremos cualquier tarea a realizar por el cursor. Por lo tanto, esta propiedad impide que todas las opciones de clic, estatales y del cursor en el elemento especificado.
Vamos a tratar de entender esta propiedad mucho mejor con la ayuda de un ejemplo,
Sintaxis:
Element {
pointer-events: none;
}
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
div {
pointer-events: none;
}
</style>
</head>
<body>
<h2>Pointer-events in CSS</h2>
<div>Go to <a href="https://www.includehelp.com/">IncludeHelp</a></div>
</body>
</html>
salida
en el ejemplo anterior, si se pasa sobre el enlace «IncludeHelp» usted no será capaz de hacer clic e ir a la página siguiente.
Consejo: ninguno debe utilizarse con mucha prudencia. Como la mayoría de las veces, nosotros queremos que nuestro cursor a realizar algunas tareas pero si se aplica esta propiedad no pasaría nada.