时间:2022-05-07来源:www.pcxitongcheng.com作者:电脑系统城
可以通过设置元素的pointer-events属性设置为none,来实现元素不可点击。
此方法是通过设置元素的鼠标事件失效来实现元素不可点击。
1 | pointer-events: none ; |
CSS pointer-events 属性定义元素是否对指针事件做出反应。
属性值 | 描述 |
---|---|
auto | 默认值。元素对指针事件做出反应,比如 :hover 和 click。 |
none | 元素不对指针事件做出反应。 |
initial | 将此属性设置为其默认值。参阅 initial。 |
inherit | 从其父元素继承此属性。参阅 inherit。 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> < html > < head > < style > div.ex1 { pointer-events: none; } div.ex2 { pointer-events: auto; } </ style > </ head > < body > < h1 >pointer-events 属性</ h1 > < p >请把鼠标指针移至下面的链接,查看是否对指针事件做出反应:</ p > < h2 >pointer-events: none:</ h2 > < div class = "ex1" >访问 < a href = "https://www.w3school.com.cn/html/" >HTML 教程</ a ></ div > < h2 >pointer-events: auto(默认)</ h2 > < div class = "ex2" >访问 < a href = "https://www.w3school.com.cn/css/" >CSS 教程</ a ></ div > </ body > </ html > |
到此这篇关于css如何设置不可点击的实现方法的文章就介绍到这了,更多相关css设置不可点击内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
2020-11-07
CSS3实现莲花绽放的动画效果2020-11-05
dedecms系统安全设置 防止入侵,挂马的基本安全操作方法2020-11-04
dedecms织梦php7+删除不了后台栏目的解决方法dedecms php7以上版本备份数据还原不出来正常数据的解决方法,主要是针对php7以上版本的数据还原不正常现象,介绍了修改的方法,需要的朋友可以参考下...
2020-11-04