先上效果图(本人喜欢胡巴，背景用了胡巴)，鼠标滑过页面，图片变暗，透明度为0.4，同时弹出登录窗口。
接下来先看css代码(写的可能不是很规范，根据调整样式顺序写的)
body{background-color: black;width: 100%;height: auto;overflow: hidden;}img{width: 1550px;height: auto;}.logIn{width:340px;height:280px;background-color: white;border-radius: 10px;border: 1px solid grey;}.login-title{margin: 0 auto;width: 100%;height:45px;background-color: #80236b; }h3{line-height: 45px;text-align: center;}.login-content{margin:30px 0 0 0;}.login-content div{width:200px;margin:0 auto;padding-bottom:25px;}.affix{top:200px;right: 200px;}label{width: 100%;line-height: 40px;}.button{margin: -10px 0 0 80px;width:180px;}input.log{width:180px;margin: 0 auto;color: white;background-color: #80236b;border-radius: 15px;height: 40px;font: 16px "microsoft yahei";}p.remember-name{font: 14px "microsoft yahei";color: dimgrey;}input{border-radius: 5px;font: 14px "microsoft yahei";}/*placeholder样式*/::-webkit-input-placeholder {font: 14px "microsoft yahei";color:grey;padding-left: 10px;line-height: 22px;}::-moz-placeholder { font: 14px "microsoft yahei";color:grey;padding-left: 10px;line-height: 22px;} /* firefox 19+ */:-ms-input-placeholder {font: 14px "microsoft yahei";color:grey;padding-left:10px;line-height: 22px;} /* ie */input:-moz-placeholder {font: 14px "microsoft yahei";color:grey;padding-left:10px;line-height: 22px;}.glyphicon{color:#80236b; } html代码（代码简单）
<body>
<img src="dist/images/link.jpg" alt="遮罩图片" style="z-index: -1"/><div class="logIn affix" style="display: none;z-index:1000"><div class="login-title"><h3>用户登录</h3></div><div class="login-content"><div class="user"><label class="user glyphicon glyphicon-user"></label><input type="text" placeholder="员工账号" /></div><div class="pass"><lable class="password glyphicon glyphicon-lock"> </lable><input type="password" placeholder="密码" /></div></div><div class="button"><p class="remember-name"> <input class="remember-name" type="radio" value="记住账号和密码" name="remember"/>记住账号和密码</p><input class="log" type="button" value="登录"/></div></div>
</body> jquery代码
//遮罩窗体弹出登录框$(function(){$('body').hover( function(event){$('img').fadeTo(1000,0.4);//1000为速度，0.4为透明度$('.logIn').show(1000);});});
本人做这个练习就是想联系一下自己写jquery代码，有问题之处还请多多指正！
