最近上课说了前端HTML和javascript，以前只是初略学习，现在需要做一个小项目，每个人写些页面，因为对前端不太了解，写起来很吃力啊。但是一点一点学习。
用的是bootstrap框架。做一个登陆页面，要实现输入框点击小眼睛可以看见密码明文。
如图，HTML代码是：
<form action="main.html" method=""><div class="login cont_join row"><h2 style="color:#003333;font:22px;strong">四方考试系统</h2><h4 style="color:#a86515;font:22px;strong">用户登录 </h4><div class="input-group form-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input type="text" class="form-control" placeholder="请输入用户名" required="required" maxlength="20"><span class="glyphicon glyphicon-remove-circle form-control-feedback" style="display:inline-block;"></span></div><div class="input-group form-group"><span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span><input type="text" class="form-control" placeholder="请输入密码" required="required" maxlength="16"><span class="glyphicon glyphicon-eye-close form-control-feedback"></span> <!--小图标元素--></div><button type="submit" class="btn btn-primary btn-block">登录</button><br><small class="text-muted">没有账户？<a href="regist.html">点此注册</a><div style="display: inline-block;width: 20%;"></div><a href="temporary.html">临时账户</a></small><a href="temporary.html">找回密码</a></small></div></form>
可以看见，用的全是bootstrap的css。但是遇到一个问题鼠标移到眼睛那里没有变成小手，或者不用这个span，用span中加眼睛的图片用css把鼠标cursor: pointer;不是没有用，就是图片被input挡住，后来查看form-control-feedback属性的原码
.form-control-feedback {position: absolute;top: 0;right: 0;z-index: 2;display: block;width: 34px;height: 34px;line-height: 34px;text-align: center;pointer-events: none;}
发现了
pointer-events: none;
原文链接： /pointer-events.html
CSS新属性pointer-events：字面理解是点击鼠标事件，值分别是auto和none。·
当使用pointer-events:none,表示它将捕获不到任何点击，而只是让事件穿透到它的下面。
来源： 前端开发博客
所以 把自己写一个属性，把pointer-events: auto;
.form-control-feedback-my{position: absolute;top: 0;right: 0;z-index: 2;display: block;width: 34px;height: 34px;line-height: 34px;text-align: center;pointer-events: auto;。cursor: pointer;}
这样鼠标挪到眼睛这里就会是小手，且可以点击获取事件。
密码变明文则是把type从password变成type；
span的class也要改变，因为眼睛的图片也是要改变的。
