I was researching a way to style the set of <select /> and I came across a solution that used a <label> with the value pointer-events: none .
I'd like to know what pointer-events is with the none value, and what other options can be used in this property?
pointer-events controls how that element will respond to user mouse events. There are few options:
none - will cancel the entire mouse event auto - restores mouse events to normal. May be useful for child elements that are inside elements with pointer-events: none
inherit - inherits from parent element
$('div').click(function () {
alert('teste');
event.stopPropagation();
});.vovo{
height: 300px;
width: 200px;
background-color: red;
pointer-events: none;
}
.pai{
height: 140px;
width: 140px;
background-color: blue;
}
.filho{
height: 70px;
width: 70px;
background-color: green;
pointer-events: auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="vovo">
<div class="pai">
<div class="filho">
</div>
</div>
</div> pointer-events: none; prevents any pointer (pointer ) action on the specified element (such as click, drag, hover, etc.). The natural value of pointer-events is auto .
Value inherit : its use is not very justified. When you specify pointer-events: none; (or auto ) to an element, all child elements already inherit this value.
Example:
<div style="pointer-events: none;">
<!-- não fez sentido usar inherit no elemento abaixo,
já que ele herda automaticamente o none da div-pai -->
<a href="" style="pointer-events: inherit;">Link</a>
<br />
<p>Texto</p>
</div>
There are other values for pointer-events , but only apply to SVG ( scalable vector graphics ):
visiblePainted visibleFill visibleStroke visible painted fill stroke all For details of these specifications, you can consult documentation at MDN .