<!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>