Penetration div (pointer-events)

pointer-events is a full of fun CSS3 properties, although mainly for SVG, but a few properties that are applied on the div is also quite interesting. As the name suggests, this is a mouse sliding events for the property, the default value of auto, if the value is none, you can pass through the element, click the element underneath. In addition to auto and none, which is the complete list of properties:pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit in addition to auto and none, others are control attributes of SVG, the use of a preset value, the SVG is to visiblePainted to performance.

First see   pointer-events: auto, is what we usually frequent, a div div is hidden from another, you can not operate a click or hover, as shown below:

 

HTML：

<div class="ybox"></div>
<div class="gbox"></div>

CSS：

.ybox {
  background: rgba(255, 200, 0, .8);
  margin: 20px;
  z-index: 3;
}
.gbox {
  background: rgba(0, 220, 170, .8);
  margin: -80px 40px 20px;
  z-index: 2;
}
.gbox:hover{
  background: rgba(255, 50, 50, .8);
}

If we take this time to increase ybox   pointer-events: none;, you will find under the gbox can hover up!

 

As for the other attributes in here to do some little introduction, according to   this explanation, we can know that other properties are explained:

• visiblePainted:
  only applies to SVG. The following elements will only become the target of mouse events: visibility attribute value is visible, and the mouse pointer within the element, and the fill attribute specifies a value other than none, visibility attribute value is visible, the mouse pointer over the element boundaries, and stroke attribute specifies a value other than none.

• visibleFill:
  only applies to SVG. Visibility is only visible in the element properties, and the mouse pointer when the internal element, the element will become the target of a mouse event, the value of the fill attribute does not affect event processing.

• visibleStroke:
  only applies to SVG. Visibility is only visible in the element properties, and the mouse pointer when boundary elements, the elements will be the target of a mouse event, the value of the property does not affect the stroke event processing.

• visible:
  only applies to SVG. Visibility is only visible in the element properties, and the mouse pointer when the interior or boundary elements, the elements will be the target of a mouse event, the value of fill and stroke attributes do not affect event processing.

• painted:
  apply only to SVG. Element will only become mouse events in the following objectives: the mouse pointer within the element, and the fill attribute specifies a value other than none, the mouse pointer over the element boundaries, and the stroke attribute specifies a value other than none.

• Value of the visibility property does not affect event processing.

• fill:
  only applies to SVG. Only when the mouse pointer within the element, the element will become the target of a mouse event, the value of fill and visibility attributes do not affect event processing.

• stroke:
  only applies to SVG. Only the mouse pointer over the boundary element, the element will become the target of a mouse event, the value of stroke and visibility attributes do not affect event processing.

• all:
  only applies to SVG. Only when the mouse pointer is inside the element or boundary element will become the target of a mouse event, the value of fill, stroke and visibility attributes do not affect event processing.

For example, we have the picture in an SVG rectangle drawn, so that you can control your mouse over the border color, or move to fill the area until discoloration, which is set to fill the result of:

 

HTML：

<svg width="200" height="140">
  <rect width="100" height="100" fill="#f00" stroke="#000" stroke-width="10" x="20" y="20" id="test"></rect>
</svg>

CSS：

#test {
  pointer-events: fill;
}
#test:hover {
  fill: #09f;
}

If this is set to change stroke will become:

This is the pointer-events usage, in fact, after they get to know, because you can click on to the bottom of things covered div, you can make many applications Oh! Really can not wait to use with Kanla!