[CSS] Pointer-events

The pointer-events property allows for control over how HTML elements respond to mouse/touch events – including CSS hover/active states, click/tap events in Javascript, and whether or not the cursor is visible.The three valid values for any HTMl element 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 will use the pointer-events value of the element's parent

 Note:

 - pointer-event: none: The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.

- The prime use case for pointer-events is to allow click or tap behavior to “pass through” an element to another element below it on the Z axis. For example, this would be useful for graphic overlays, or hiding elements with opacity (eg. tooltips) and still allowing text-selection on the content below it.

Ex: https://codepen.io/anon/pen/mBQPjX

Comments

Post a Comment

Popular posts from this blog

Login/Logout account Git in Terminal/cmd

- First, open Termial/cmd and type: 1. Logout: git config --global --unset user.name git config --global --unset user.email or git config --global --unset-all 2. Login: It is important to configure your Git username and email address as every Git commit will use this information to identify you as the author. On your shell, type the following command to add your username: git config --global user.name "YOUR_USERNAME" Then verify that you have the correct username: git config --global user.name To set your email address, type the following command: git config --global user.email "your_email_address@example.com" To verify that you entered your email correctly, type: git config --global user.email
Read more

Logout Git on MacOS

Image
Managing Remotes  / Updating credentials from the OSX Keychain Updating credentials from the OSX Keychain You'll need to update your saved username and password in the  git-credential-osxkeychain helper if you change your password or username on GitHub. Updating your credentials via Keychain Access In Finder, search for the  Keychain Access  app. In Keychain Access, search for  github.com . Find the "internet password" entry for  github.com Edit or delete the entry accordingly. Deleting your credentials via the command line Through the command line, you can use the credential helper directly to erase the keychain entry. To do this, type the following command: git credential-osxkeychain erase host=github.com protocol=https [Press Return] If it's successful, nothing will print out. To test that it works, try and clone a repository from GitHub. If you are prompted for a password, the keychain entry was deleted. ...
Read more

React Tutorial for Beginners

Image
Reference link:  https://ihatetomatoes.net/react-tutorial-for-beginners/ This guide is for beginner React developers who struggle to move forward while learning React. It will give you a  very simple “ABC” path that you can follow , step by step, concept by concept, without the overwhelming feeling that you need to learn everything at once. Take your time,  digest the content of each article  in this series and  try to complete the challenge . My suggestion is that you only progress to the next step, when you are  super clear  about each of the concepts. What you will learn what is a React  component what is the difference between  stateless  and  class  components what is the  state  and what are  props what is  destructuring  in JavaScript how to render React component on the page Are you already familiar with React? Try the challenge at the end of the article. 1. Think React, t...
Read more