方法:给按钮元素添加“pointer-events:none;”样式来让按钮元素 永远 不会成为鼠标事件的t arg et,让其 点击事件 失效,即可控制按钮不可用。
本教程操作环境:windows7系统、css3 && ht ML 5版、Dell G3 电 脑。
(学习视频分享:css视频教程)
在HTML中我们可以直接通过HTML的disabled或readonly属性实现按钮 不可点击 ;而在css中,可以使用pointer-events属性实现点击事件失效。
我们可以为按钮添加“pointer-events:none”两种css样式实现按钮不可点击。
pointer-events属性除了指示该元素不是鼠标事件的目标之外,值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。实现按钮上的点击事件失效。
示例:CSS让按钮不可用
<!DOCTY PE html> <html> <head> < ;m eta charset="utf-8"> <style> button { opac IT y: 0.5; /*设置 蒙版 效果*/ pointer-events: none; /*禁止鼠标事件*/ } </style> </head> <body> <button></button> </body> </html>
说明:
设置pointer-events:none样式的元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡 阶段 触发父元素的事件侦听器。
使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发。如果元素后代 明确 指定了pointer-events属性并允许其成为鼠标事件的目标,那么指向该元素的任何事件在事件传播 过程中 都将通过父元素,并以适当的方式触发其上的事件侦听器。当然位于屏幕上在父元素上但不 在后 代元素上的鼠标 活动 都不会被父元素和后代元素捕获(将会穿过父元素而指向位于其下面的元素)。
更多编程相关知识,请访问:编程入门!!
以上就是css怎么控制按钮不可用的详细内容,更多请关注其它相关 文章 !
总结
以上是 为你收集整理的 css怎么控制按钮不可用 全部内容,希望文章能够帮你解决 css怎么控制按钮不可用 所遇到的问题。
如果觉得 网站内容还不错,欢迎将 推荐好友。