La propiedad puntero-eventos en CSS

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

The pointer-events Property in CSS - 4

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

The pointer-events Property in CSS - 5

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.


Deja un comentario

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