css怎么让元素不允许点击?

css怎么让元素不允许点击?不可点击?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

我们知道form元素里的 disabled属性可以禁用元素,但是我们想让一个div或者p标签也不可以点击就用css里的pointer-events: none;

pointer-events:none是什么?

pointer-events是CSS3中又一冉冉的属性,其支持的值牛毛般多,不过大多都与SVG相关,我们可以不用理会。当下,对于偶们来讲,与SVG划开界线值得一提的就是[none|auto]两个属性值了。其中”auto”的感觉与width属性的”auto”类似,一般在一些特殊场合露一手,平时闺门不出,没什么说头。因此,一轮筛选下来,我们需要留意的只是pointer-events:none而已。

pointer-events:none是个很有意思的东西,某些情况下其精湛的表现会让人两眼发光。

pointer-events:none顾名思意,就是鼠标事件拜拜的意思。元素应用了该CSS属性,链接啊,点击啊什么的都变成了“浮云牌酱油”。

使用pointer-events:none禁止点击

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <style>
 a.disabled {
 pointer-events: none;
 filter: alpha(opacity=50);
 /*IE滤镜,透明度50%*/
 -moz-opacity: 0.5;
 /*Firefox私有,透明度50%*/
 opacity: 0.5;
 /*其他,透明度50%*/
 }
 </style>
 </head>

 <body><br/><br/>
 <a href="#">不可点击的a链接</a><br/><br/>
 <a href="#">正常的a链接</a>
 </body>

</html>

效果图:

1.gif


更多web前端知识,请查阅 HTML中文网 !!

以上就是css怎么让元素不允许点击?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏