From ed13d44e299c7daf0e98973c76adbaf34d347944 Mon Sep 17 00:00:00 2001 From: Enrico Lucia Date: Thu, 17 Dec 2015 15:41:24 +1100 Subject: [PATCH] Prevent events from css added --- README.md | 26 +++++++++++++++++++++----- 1 file changed, 21 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index c7cebf53..37a8072a 100644 --- a/README.md +++ b/README.md @@ -15,6 +15,7 @@ A collection of tips to help take your CSS skills pro. 1. [Get Rid of Margin Hacks With Flexbox](#get-rid-of-margin-hacks-with-flexbox) 1. [Use Attribute Selectors with Empty Links](#use-attribute-selectors-with-empty-links) 1. [Style "Default" Links](#style-default-links) +1. [Prevent events from css](#prevent-events-from-css) ### Use `:not()` to Apply/Unapply Borders on Navigation @@ -72,8 +73,8 @@ html, body { } body { - -webkit-align-items: center; - -ms-flex-align: center; + -webkit-align-items: center; + -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex; @@ -100,7 +101,7 @@ Use the `:not()` pseudo-class so no comma is added to the last item. ### Select Items Using Negative `nth-child` -Use negative `nth-child` in CSS to select items 1 through n. +Use negative `nth-child` in CSS to select items 1 through n. ```css li { @@ -229,7 +230,7 @@ Now column gutters always appear evenly-spaced. ### Use Attribute Selectors with Empty Links -Display links when the `` element has no text value but the `href` attribute has a link: +Display links when the `` element has no text value but the `href` attribute has a link: ```css a[href^="http"]:empty::before { @@ -254,7 +255,22 @@ a[href]:not([class]) { Now links that are inserted via a CMS, which don't usually have a `class` attribute, will have a distinction without generically affecting the cascade. +### Prevent events from css + +This attribute allows for control over how HTML elements respond to mouse and touch events (including CSS hover/active states, click/tap events in Javascript), and whether or not the cursor is visible. + +```css +.prevent-clicks { + pointer-events: none; /* prevents all events */ +} +``` + +The three valid values for all HTML elements are: +- `none` prevents all click, state and cursor options on the specified HTML element +- `auto` restores the default functionality (useful for use on child elements of an element with pointer-events: none; specified) +- `inherit` uses the pointer-events value of the element's parent + ### Support -These protips work in current versions of Chrome, Firefox, Safari, and Edge, and in IE11. \ No newline at end of file +These protips work in current versions of Chrome, Firefox, Safari, and Edge, and in IE11.