Eventos de puntero CSS Tailwind

Esta clase acepta mucho valor en Tailwind CSS en el que todas las propiedades están cubiertas en forma de clase. Esta clase se usa para especificar si los elementos se muestran en los eventos del puntero o no se muestran en el puntero. En CSS, lo hacemos usando la propiedad pointer-events de CSS

Clases de eventos de puntero:

  • pointer-events-none: esta clase se utiliza para especificar que un elemento no reacciona a los eventos de puntero.
  • pointer-events-auto: esta clase se usa para especificar que un elemento debe reaccionar a eventos de puntero.

Sintaxis:

<element class="pointer-events-{behaviour}">...</element>

Ejemplo:

HTML

<!DOCTYPE html>
<html>
<head> 
    <link href= 
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
        rel="stylesheet"> 
</head> 
  
<body class="text-center"> 
    <h1 class="text-green-600 text-5xl font-bold"> 
        GeeksforGeeks 
    </h1> 
    <b>Tailwind CSS Pointer Events Class</b> 
    <div id="main" class="p-2 justify-around ml-32 h-26 w-2/3 flex 
                          items-stretch 
                          bg-green-200 border-solid border-4 
                          border-green-900 gap-4"> 
        <div class="pointer-events-auto bg-blue-600 
                    w-full h-8 rounded-lg">
            pointer-events-auto
  
        </div> 
        <div class="pointer-events-none bg-green-600 
                    w-full h-8 rounded-lg">
            pointer-events-none
  
        </div> 
    </div> 
</body> 
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

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