大家好，又见面了，我是你们的朋友全栈君。
大家好，我是半夏?，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 ? 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识! 点我探索新世界！
原文链接 ==>http://sylblog.xin/archives/69
前言
pointer-events
pointer-events属性设置 HTML 元素如何响应鼠标/触摸事件/单击/点击事件以及光标是否可见。
虽然pointer-events属性有11 个可能的值，但其中8个值都用于 SVG。任何 HTMl 元素的三个有效值是：
none阻止指定 HTML 元素上的所有单击、状态和光标选项auto默认功能inherit将使用pointer-events元素的父元素的值
pointer-events:auto; 穿透元素！
允许单击或点击行为“穿过”一个元素到 Z 轴上它下面的另一个元素。
示例
<p>
我是在下面的文字，你双击试试。
</p>
<div class="events-none">我无法识别鼠标的双击</div>
当你双击的时候，下面的文字可以被选中。
浮动label
上面我们学习了pointer-events的用法。接着就回到正题，实现前言中的效果。
实现登录框
<div class="login-form">
<h2>登录</h2>
<form>
<div class="login-info">
<input type="text" name="" required=""/>
<label>请输入用户名</label>
</div>
<div class="login-info">
<input type="password" name="" required="" />
<label>请输入密码</label>
</div>
</form>
</div>
修改式样。将login-info设置为position: relative，同时设置label的位置，使他正好处于input框中。
到这一步我们还没有添加position-events:none;
.login-form {
position: absolute;
width: 400px;
padding: 40px;
background: #fff;
box-sizing: border-box;
box-shadow: 0 15px 25px rgba(160, 149, 149, 0.432);
border-radius: 10px;
}
.login-form h2 {
margin: 0 0 30px;
padding: 0;
color:#000;
text-align: center;
}
.login-form .login-info {
position: relative;
}
.login-form .login-info input {
width: 100%;
padding: 10px 10px;
font-size: 16px;
color: #000;
margin-bottom: 30px;
border: none;
border: 1px solid #000;
outline: none;
background: transparent;
}
.login-form .login-info label {
position: absolute;
top: 0;
left: 0;
padding: 10px 10px;
font-size: 16px;
color: rgb(15, 20, 25);;
transition: 0.5s;
}
添加input:focus的效果
.login-form .login-info input:focus ~ label {
top: -20px;
left: 0;
color: rgb(29, 155, 240);
font-size: 12px;
z-index: 1;
}
.login-form .login-info input:focus{
border: 1px solid rgb(29, 155, 240);
}
但是这样存在一个bug。当你鼠标点击输入用户名的时候，并不会发生任何效果，只有点击后面的空白处，label才会浮动。
pointer-events:none;
在label上设置pointer-events:none，穿透。
.login-form .login-info label {
position: absolute;
top: 0;
left: 0;
padding: 10px 10px;
font-size: 16px;
color: rgb(15, 20, 25);;
pointer-events: none;
transition: 0.5s;
}
最终的效果：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/158359.html原文链接：https://javaforall.net
