今天在蓝色上无意中看到pointer-events属性&＃xff0c;很好奇&＃xff0c;以前还从未使用过这个属性&＃xff0c;原来它的作用是&＃xff1a;当一个元素覆盖在另一个元素上&＃xff0c;而我们又想点击被覆盖的那个元素&＃xff0c;这时这个属性就派上用场了。
pointer-events的默认属性为auto&＃xff0c;如我们要想实现上面的效果则应把它的属性设为none&＃xff1b;不过到目前为止&＃xff0c;仅Firefox 3.6&＃43;、Safari 4 和Google Chrome支持该属性。
总之&＃xff0c;即&＃xff1a;如果B位于A上面&＃xff0c;我们要想点击A&＃xff0c;则应该在css里设置B的pointer-events为none&＃xff0c;它穿透了B元素直接对A进行操作&＃xff1b;
举个例子&＃xff0c;为了方便&＃xff0c;样式就直接在html里了&＃xff1a;
代码 <div style&＃61;"position:relative;">
<a href&＃61;"http://www.baidu.com">这里是A元素&＃xff0c;位于B的下面&＃xff0c;点击我吧点击我吧点击我吧a>
<div style&＃61;"position:absolute;top:0;left:0;background:#333;filter:Alpha(Opacity&＃61;50);-moz-opacity:0.5; pointer-events: none;">
这里是B元素&＃xff0c;他位于A元素的上面。
div>
div>
<a href&＃61;"http://www.baidu.com">这里是A元素&＃xff0c;位于B的下面&＃xff0c;点击我吧点击我吧点击我吧a>
<div style&＃61;"position:absolute;top:0;left:0;background:#333;filter:Alpha(Opacity&＃61;50);-moz-opacity:0.5; pointer-events: none;">
这里是B元素&＃xff0c;他位于A元素的上面。
div>
div>
京公网安备 11010802041100号