<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
text-align: center;
}
#tip{
margin: 0 auto;
width: 200px;
height: 50px;
background-color: orange;
display: none;
}
</style>
</head>
<body>
<div>
<label><input type="checkbox">记住密码</label>
<div id="tip">记住密码后请注意安全,防止密码泄露</div>
</div>
<script>
window.onload=function(){
var oTag=document.getElementById("tip")
var oDiv=document.getElementsByTagName('label')[0]
oDiv.onmouseover=function(){
oTag.style.display="block"
console.log("1")
}
oDiv.onmouseout=function(){
oTag.style.display='none'
console.log("2")
}
}
</script>
</body>
</html>
(ps:这里我遇到一个问题,就是我每改动代码一次就得重新刷新网页,最后鼠标移入移出事件,我刷新网页后发现鼠标移入移出事件得再点击一次才能触发,反复检查代码发现没问题,最后发现得把网页关了,再重新打开,鼠标移入移出事件才能正常触发。)