Share 6 introductions about pointer attributes

In fact, I have known about this attribute for a long time, but I have never studied it. I happened to see this word on Twitter today, so I went to research it, and it just solved a small problem I was encountering, so I shared it. Well, actually this is a relatively simple CSS3 property. Let’s take a look at my detailed introduction to the pointer attribute.

1. Sharing tips on using the pointer-events attribute of CSS to achieve mouse penetration effects

First of all, the picture above is a The products on the product list page of East Mall have a "Shocking Price" icon in the upper right corner. Everyone knows that this is absolutely positioned with a label, which will cover the product picture below. Move the mouse to "Shocking Price" You cannot click on the link to the image behind the "Hot Price" image. Of course, we can also add a link to this icon, which will solve the problem. (Today we are not talking about such a simple thing, let’s continue)

The scope of responsibilities of CSS and JavaScript in modern browsers are becoming increasingly blurred and unclear. For example, the -webkit-touch-callout attribute in CSS can prevent the bubble box from popping up when the user clicks on it in iOS. The style of pointer-events discussed in this article is more like JavaScript. It can:

1. Prevent the user's click action from producing any effect
2. Prevent the display of the default mouse pointer
3. Prevent hover and active state changes in CSS from triggering events
4. Prevent events from being triggered by JavaScript click actions
One CSS property can do so many things!

2. Introduction to changing the mouse to hand style using CSS

In the self-set p or other tags, for a better experience, the sliding process will be , change the mouse into a gesture

Briefly summarize the corresponding styles of css. In the p where

is located, just add cursor:pointer.

3. About the weird behavior of the pointer-events attribute in css_html/css_WEB-ITnose

In my memory, pointer-events is used for event routing. That is to say, if pointer-events:none is set to the parent element, the parent element will no longer listen to mouse events (similar to touch, click, etc.).

When we need to do this, we usually want to "penetrate" the parent layer. When we directly click on the child element, the parent element will act as if nothing happened. This is information gathered from my previous body of knowledge. It doesn't seem wrong now, but it's incomplete.

4. css shields mouse events of elements pointer-events_html/css_WEB-ITnose

//Shield clicks

$('body').css('pointer-events','none');

//Restore default

$('body').css('pointer-events','auto');

Use: You can set the mouse events of the following elements when popping up the layer or when fixed positioning

5. Magical css attribute pointer-events_html/css_WEB-ITnose

After an absolutely positioned element covers a link or adds an element with an event handle, the link's default behavior (page jump) or element event will not be triggered.
Now Firefox3.6+/Safari4+/Chrome supports a css attribute called pointer-events. Use this attribute to determine whether you can penetrate absolutely positioned elements to trigger certain behaviors of the following elements

6. cursor mouse style??Attribute_html/css_WEB-ITnose

When we layout DIV CSS, we will encounter the control of the mouse pointer cursor within the object, such as the mouse passing through the pointer and changing into a finger shape. Next, we introduce the mouse pointer style cursor. control. In addition to the system default mouse pointer style, you can set the image as the mouse pointer through CSS. It is common for some websites to have various small image styles for the mouse pointer. Of course, this is to set the mouse style through css cursor.

Questions and answers related to the pointer attribute:

1. Questions about the css3 pointer-events: none; attribute

2. objective-c - RAC: incompatible block pointer types sending

【Related recommendations】

1. php.cnDugujiu Cheap (2) - css video tutorial

2. Css pointer control code for displaying hand shape under firefox_Basic tutorial

The above is the detailed content of Share 6 introductions about pointer attributes. For more information, please follow other related articles on the PHP Chinese website!