<style>
#dianji {
width: 150px;
height: 50px;
margin-top: 10px;
margin-left: 10px;
border: 1px solid #eee;
background-color: red;
display: none;
}
</style>
<body>
<input type="checkbox" id="box">
<label for="box">记住密码</label>
<div id="dianji">选择后，密码保存两周</div>
</body>
<script src=script/jquery-1.11.3.js></script>
<script>
//原生js实现
/*window.onload=function(){
var boxobj=document.getElementById(‘box‘);
var dianjiobj=document.getElementById(‘dianji‘);
boxobj.addEventListener("click",function(){
dianjiobj.style.display="block";
},false)
boxobj.addEventListener("mouseout",function(){
dianjiobj.style.display="none";
},false)
}*/
//jquery实现
$(function(){
$("#box").bind("click",function(){
$("#dianji").css("display","block");
//$("#dianji").show();与上面代码意思一样
});
$("#box").bind("mouseout",function(){
$("#dianji").css("display","none");
//$("#dianji").hide();
})
})
</script>
</html>效果图：
选中后，会弹出一个提示框：
移除鼠标后，提示框取消。
本文出自 “梦想需要坚持” 博客，请务必保留此出处http://xiyin001.blog.51cto.com/9831864/1762527
原文：http://xiyin001.blog.51cto.com/9831864/1762527