CSS3制作按钮开关-pointer-events

android 开发前端后台
前端开发转后台
后台开发与前端

{
pointer-events:1阻止用户的点击动作产生任何效果
2阻止缺省鼠标指针的显示
3阻止css里的hover和active状态的变化触发事件
4阻止JavaScript点击动作触发的事件
<一个css属性能做所有的这么多事情!>
}

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>Title</title>
    <style>
        *{margin:0px;padding:0px;}
.box{
width:980px;
height:100px;
background:#c7ddef;
margin:0auto;
line-height:100px;
text-align:center;
}
label{
display:inline-block;
width:60px;
height:30px;
background:#fff;
border-radius:30px;
position:relative;
cursor:pointer;
transition: background-color .1sease-out;
box-shadow:1px1px3pxrgba(100,100,100,0.6);
/*pointer-events: none;//禁止当前元素所有触发动作*/
}
label:after{
content:”;
position:absolute;
left:0;
height:28px;
top:1px;
background:#cccccc;
width:28px;
border-radius:50%;
cursor:pointer;
transition:left.1sease-out;
/*pointer-events: auto;//其子元素放开限制,*/
}
  input[type=checkbox]{
display:none;
}
input[type=checkbox]:checked+label{
background:#ff5a5a;
transition: background-color .1sease-in;
}
input[type=checkbox]:first-child:checked+label{
background:#f39c12;
transition: background-color .1sease-in;
}
input[type=checkbox]:checked+label:last-child{
background:#1abc9c;
transition: background-color .1sease-in;
}
input[type=checkbox]:checked+label:after{
background:#fff;
left:32px;
transition:left.1sease-in;
}
</style>
</head>
<body>
    <div class=”box”>
        <input type=”checkbox” id=”l1″ name=”button” />
        <label for=”l1″></label>
        <input type=”checkbox” id=”l2″ name=”button” />
        <label for=”l2″></label>
        <input type=”checkbox” id=”l3″ name=”button” />
        <label for=”l3″></label>
    </div>
</body>
</html>

结果
html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>Title</title>
    <style>
        *{margin:0px;padding:0px;}
.box{
width:980px;
height:100px;
background:#c7ddef;
margin:0auto;
line-height:100px;
text-align:center;
}
label{
display:inline-block;
width:60px;
height:30px;
background:#fff;
border-radius:30px;
position:relative;
cursor:pointer;
transition: background-color .1sease-out;
pointer-events:none;
box-shadow:1px1px3pxrgba(100,100,100,0.6);
}
label:after{
content:”;
position:absolute;
left:0;
height:28px;
top:1px;
background:#cccccc;
width:28px;
border-radius:50%;
cursor:pointer;
transition:left.1sease-out;
pointer-events:auto;
}
        input[type=checkbox]{
display:none;
}
input[type=checkbox]:checked+label{
background:#ff5a5a;
transition: background-color .1sease-in;
}
input[type=checkbox]:first-child:checked+label{
background:#f39c12;
transition: background-color .1sease-in;
}
input[type=checkbox]:checked+label:last-child{
background:#1abc9c;
transition: background-color .1sease-in;
}
input[type=checkbox]:checked+label:after{
background:#fff;
left:32px;
transition:left.1sease-in;
}
</style>
</head>
<body>
    <div class=”box”>
        <input type=”checkbox” id=”l1″ name=”button” />
        <label for=”l1″></label>
        <input type=”checkbox” id=”l2″ name=”button” />
        <label for=”l2″></label>
        <input type=”checkbox” id=”l3″ name=”button” />
        <label for=”l3″></label>
    </div>
</body>
</html>
web前端和后台开发谁待遇好
react 后台前端开发
前端开发还是后台开发
» 本文来自:前端开发者 » 《CSS3制作按钮开关-pointer-events》
» 本文链接地址:https://www.rokub.com/6232.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!