{
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:0 auto;
- 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 .1s ease-out;
- box-shadow:1px 1px 3px rgba(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 .1s ease-out;
- /*pointer-events: auto;// 其子元素放开限制,*/
- }
- input[type=checkbox]{
- display: none;
- }
- input[type=checkbox]:checked + label{
- background: #ff5a5a;
- transition: background-color .1s ease-in;
- }
- input[type=checkbox]:first-child:checked + label{
- background: #f39c12;
- transition: background-color .1s ease-in;
- }
- input[type=checkbox]:checked + label:last-child{
- background: #1abc9c;
- transition: background-color .1s ease-in;
- }
- input[type=checkbox]:checked + label:after{
- background: #fff;
- left:32px;
- transition: left .1s ease-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:0 auto;
- 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 .1s ease-out;
- pointer-events: none;
- box-shadow:1px 1px 3px rgba(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 .1s ease-out;
- pointer-events: auto;
- }
- input[type=checkbox]{
- display: none;
- }
- input[type=checkbox]:checked + label{
- background: #ff5a5a;
- transition: background-color .1s ease-in;
- }
- input[type=checkbox]:first-child:checked + label{
- background: #f39c12;
- transition: background-color .1s ease-in;
- }
- input[type=checkbox]:checked + label:last-child{
- background: #1abc9c;
- transition: background-color .1s ease-in;
- }
- input[type=checkbox]:checked + label:after{
- background: #fff;
- left:32px;
- transition: left .1s ease-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>
来源: http://www.qdfuns.com/article/16201/1957f169eabe15e8db272fa6b7d2a0dd.html