您的位置:首页> 前端教程> CSS3教程
文章导航

CSS3 pointer-events

2018-8-17 01:20| 作者: admin| 查看: 768| 评论: 0|来自: 蚂蚁部落

很多CSS3的功能非常类似于JavaScript,pointer-events属性也体现了这一点。

语法结构:

[CSS] 纯文本查看 复制代码
pointer-events:  auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit

属性有很多属性值,但当前只有auto和none对普通web页面有效,其他的属性值都是针对SVG的。

pointer-events属性具有如下功能:

(1).阻止用户的点击动作产生任何效果。

(2).阻止缺省鼠标指针的显示。

(3).阻止CSS里的hover和active状态的变化触发事件。

(4).阻止JavaScript点击动作触发的事件。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
a{
  text-decoration:none;
  color:green;
  pointer-events:none;
}
</style>
</head>
<body>
<a href="http://www.softwhy.com">蚂蚁部落</a>
<div>鼠标放在链接上查看效果</div>
</body>
</html>

默认状态下,鼠标悬浮,指针会变成小手形状,如果将pointer-events设置为none就不会有此效果。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
#box{
  width:300px;
  height:100px;
  margin:0px auto;
  position:relative;
  text-align:center;
  line-height:100px;
}
#box .mark{
  width:300px;
  height:100px;
  background:#CCC;
  opacity:0.3;
  filter:alpha(opacity=30);
  position:absolute;
  top:0px;
  left:0px;
  z-index:100;
}
a{
  text-decoration:none;
  color:green;
}
</style>
</head>
<body>
<div id="box">
  <a href="http://www.softwhy.com">蚂蚁部落</a>
  <div class="mark"></div>
</div>
</body>
</html>

上面的代码中,由于链接<a>元素被绝对定位的div元素所覆盖,它就失去了任何点击效果。

代码修改如下:

[CSS] 纯文本查看 复制代码
#box .mark{
  width:300px;
  height:100px;
  background:#CCC;
  opacity:0.3;
  filter:alpha(opacity=30);
  position:absolute;
  top:0px;
  left:0px;
  z-index:100;
  pointer-events:none;
}

只要给绝对定位的div元素添加pointer-events:none即可解除它默认的限制,能够继续点击链接。

同样对于事件处理函数也是如此,如果给链接a绑定click事件处理函数,默认情况下,如果被绝对定位元素覆盖,那么它就不能够点击了,但是将覆盖元素的pointer-events属性设置为none即可实现点击触发事件功能。


鲜花

握手

雷人

路过

鸡蛋
上一篇:CSS3 @supports下一篇:CSS3 currentColor

最新评论

返回顶部