<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>密码显示隐藏</title> </head> <style> .pass { position: relative; } .pass img { position: absolute; top: 3px; left: 186px; } </style> <body> <div class="form-group pass"> <label class="control-label" for="ds_host">密码</label> <input class="password form-control" type="password" value="" placeholder="输入您的用户名"> <img class="passimgs" src="images/xs.png"> </div> </body> </html> <script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script> <script> var pimg=$(".passimgs"); pimg.mouseover(function() { $(this).attr("src", "images/xianshi.png"); $(".password").attr("type", "text"); }); pimg.mouseout(function() { $(this).attr("src", "images/xs.png"); $(".password").attr("type", "password"); }); </script>