Magical css attribute pointer-events_html/css_WEB-ITnose-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

Magical css attribute pointer-events_html/css_WEB-ITnose

Jun 24, 2016 am 11:50 AM

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 underlying elements. As follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS:pointer-events</title>
<style type="text/css">
.overlay1 {
width:80px;
height:20px;
background:gold;
position:absolute;
top:5px;
left:5px;
opacity:0.5;
}
.overlay2 {
width: 80px;
height:20px;
background:gold;
position:absolute;
top:40px;
left:5px;
Opacity:0.5;
}
.pointer{pointer-events:none;}
</style>
<script type="text/javascript">
window.onload = function(){
document. getElementById('chx').onclick = function(){        document.getElementById('a').className
                                                                                                          . getElementById('b').className
                                                                                                                                                                                                                                                  ;/head>
<body>
<div id="a" class="overlay1"></div>
<div id="b" class="overlay2" ></div>
<a href="http://mail.sina.com.cn">SinaMail</a>
<br/><br/>
                                                                                                                                          <label for="chx">Enable penetration click</label>
</p>
</body>
</html>

By default, link and span elements are obscured by both absolutely positioned divs. There is no response after clicking respectively, that is, the default behavior of link a cannot be triggered, and the click event of the span element cannot be triggered. However, after turning on the penetration click, clicking the link and span again in Firefox/Safari/Chrome, a browser that supports pointer-events, can trigger the corresponding behavior.

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn