css怎么控制按钮不可用


本文摘自PHP中文网,作者青灯夜游,侵删。

方法:给按钮元素添加“pointer-events:none;”样式来让按钮元素永远不会成为鼠标事件的target,让其点击事件失效,即可控制按钮不可用。

本教程操作环境:windows7系统、css3&&html5版、Dell G3电脑。

(学习视频分享:css视频教程)

在HTML中我们可以直接通过HTML的disabled或readonly属性实现按钮不可点击;而在css中,可以使用pointer-events属性实现点击事件失效。

我们可以为按钮添加“pointer-events:none”两种css样式实现按钮不可点击。

pointer-events属性除了指示该元素不是鼠标事件的目标之外,值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。实现按钮上的点击事件失效。

示例:CSS让按钮不可用

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<!DOCTYPE html>

<html>

 

    <head>

        <meta charset="utf-8">

        <style>

            button {

                opacity: 0.5;

                /*设置蒙版效果*/

                pointer-events: none;

                /*禁止鼠标事件*/

            }

        </style>

    </head>

 

    <body>

        <button>php中文网</button>

    </body>

 

</html>

说明:

设置pointer-events:none样式的元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。

使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标,那么指向该元素的任何事件在事件传播过程中都将通过父元素,并以适当的方式触发其上的事件侦听器。当然位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获(将会穿过父元素而指向位于其下面的元素)。

更多编程相关知识,请访问:编程入门!!

以上就是css怎么控制按钮不可用的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

css隐藏元素的几种方法中可以触发点击事件的是?

css是什么缩写

css 实现拖拽改变布局大小

css怎么消除块元素

css有哪几类样式

css3+javascript怎么做一个旋转的3d盒子?

css如何添加滚动条

“margin:0 atuo;”是什么意思?

css因mime类型不匹配而被忽略怎么办

css设置背景透明度有什么方式

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...