标签：abs 说明 src 介绍 ie6 com 代码 head set
我们在 HTML 开发时可能会遇到这样的情况：页面上有一些元素使用绝对定位布局，这些元素可能会遮盖住它们位置下方的某个元素的部分或者全部。默认情况下，下方元素被遮挡的部分是不会响应鼠标事件的。
但有时我们可能需要被遮盖住的元素仍然能够处理鼠标事件。 比如：我们在一个地图组件上覆盖了一个显示信息的元素，但又不想让这个信息面板影响下方地图的拖动等操作。那么我们可以使用一个叫 pointer-events 的 css 属性来实现。
这里将第二个 a 标签 pointer-events 样式属性设置为 none，那么该链接不仅无法被点击，而且没有鼠标手形样式。（同样的，我们可以使用该样式来避免按钮多次点击、表单重复提交等问题。）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li><a href="http://www.hangge.com">可以点击的链接</a></li>
<li><a href="http://www.hangge.com" style="pointer-events:none">不能点击的链接</a></li>
</ul>
</body>
</html>
（1）效果图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.top {
width: 100px;
height: 90px;
position: absolute;
top: 0;
left: 65px;
background: yellow;
opacity: 0.5;
pointer-events: none;
}
</style>
</head>
<body>
<!-- 下方的链接 -->
<ul>
<li><a href="http://www.hangge.com">航歌</a></li>
<li><a href="http://www.hangge.com">hangge.com</a></li>
</ul>
<!-- 上方黄色div -->
<div class="top"></div>
</body>
</html>
(转)CSS3之pointer-events(屏蔽鼠标事件)属性说明
标签：abs 说明 src 介绍 ie6 com 代码 head set
原文地址：https://www.cnblogs.com/xuange306/p/9448154.html
