前端开发者| 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 后台前端开发 |
| 前端开发还是后台开发 |
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册