<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS练习第一课</title>
</head>
<link id="bg" rel="stylesheet" type="text/css" href=""> /这里是给了引入的样式表一个ID，空值它引入的样式地址/
<style type="text/css">
div{
color:#FFF;
font-size:16px;
font-family:microsoft yahei;
font-weight:700;
line-height:50px;
text-align:center;
border:1px solid blue;
display:none; //div默认为隐藏
}
</style>
<script type="text/javascript">
function bloc() //鼠标悬停执行此函数，onmouseover
{
var aDiv=document.getElementById('div1'); /获取div1这个ID，并给他取个名字为aDiv/
var aBg=document.getElementById("bg"); /获取bg这个ID，并给他取个名字为aBg/
aDiv.style.display="block" /让它的display显示/
aDiv.style.background="pink" /让它的背景变为粉色/
aDiv.style.width="180px" /让它的宽变为180像素/
aDiv.style.height="50px" /让它的高变为50像素/
aBg.href="a.css"
}
function non() //鼠标移除执行此函数，onmouseout
{
var aDiv=document.getElementById('div1'); /获取div1这个ID，并给他取个名字为aDiv/
var aBg=document.getElementById("bg"); /获取bg这个ID，并给他取个名字为aBg/
aDiv.style.display="none"; /让它的div隐藏/
aBg.href=""/让它href为空，不引入样式表/
}
</script>
<body>
<label onmouseover="bloc();" onmouseout="non()"><input type="checkbox">保存密码</label>/鼠标放在此处可以出现效果/
<div id="div1">不要在公共场合保存密码</div> /此div默认为隐藏/
</body>
</html>