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