效果：
当鼠标不在自动登录上时，只显示自动登录这个表单，下面的div提示则隐藏。
当鼠标移动到自动登录这个表单时，则显示下面的div提示，当鼠标移出时再将其隐藏
代码实现与原理：
HTML代码：
<body>
<input type="checkbox" />自动登录
<div id="div1">不要再玩游戏啦！！！</div>
</body>
CSS代码：给id为div1的元素做一下修饰，并且将其最开始用display:none;设置为不可见得
#div1{background:#FC6; color:#000; width:90px; height:50px; border:1px solid #F00; display:none;}
js代码：使用鼠标事件，当鼠标移动到自动登录这个表单的时候，执行js代码将div1这个元素的CSS样式代码中的display属性的值改为block，当鼠标移出时再将其隐藏
<script type="text/javascript">
if(document.getElementsByName){
//首先获取自动登录这个表单，然后在该表单上绑定鼠标事件
var input = document.getElementsByName(‘log_in‘)[0];//在鼠标事件内先获取到div1这个提示文本元素
var div1 = document.getElementById("div1");
input.onmouseover=function(){//当鼠标移入将该元素的CSS样式中的display属性的值改为block
div1.style.display=‘block‘;
}
input.onmouseout=function(){//当鼠标移出时再将该元素的CSS样式中的display属性的值改为none
div1.style.display="none";
}}else{
alert("浏览器不兼容，请更换")
}
</script>
到这里有个问题是当鼠标移动到文字上时是没有这样的效果的，只能移动到表单上时才有效果，所以这里表单要用一个lable标签绑定表单的文字，总体实现代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<style type="text/css">
#div1{background:#FC6; color:#000; width:90px; height:50px; border:1px solid #F00; display:none;}
</style></head>
<body>
<label for="log">
<input type="checkbox" name="log_in" id="log"/><span>自动登录</span>
</label>
<div id="div1">不要再玩游戏啦！！！</div>
</body></html>
<script type="text/javascript">
if(document.getElementsByName){
//首先获取自动登录这个表单，然后在该表单上绑定鼠标事件
var input = document.getElementsByTagName(‘span‘)[0];//在鼠标事件内先获取到div1这个提示文本元素
var div1 = document.getElementById("div1");
input.onmouseover=function(){//当鼠标移入将该元素的CSS样式中的display属性的值改为block
div1.style.display=‘block‘;
}
input.onmouseout=function(){//当鼠标移出时再将该元素的CSS样式中的display属性的值改为none
div1.style.display="none";
}}else{
alert("浏览器不兼容，请更换")
}
</script>
这里还加上了lable标签，能够实现当点击文字的时候也能实现选中，而且当鼠标放在文字上时也能实现提示文字的显示，当鼠标移出时隐藏
，但这里只是移动到文字中才有js效果，移动到选择中是没有效果的
修改代码如下：（就是讲获取标签span改为lable）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<style type="text/css">
#div1{background:#FC6; color:#000; width:90px; height:50px; border:1px solid #F00; display:none;}
</style></head>
<body>
<label for="log">
<input type="checkbox" name="log_in" id="log"/><span>自动登录</span><!--可以将span标签去掉-->
</label>
<div id="div1">不要再玩游戏啦！！！</div>
</body></html>
<script type="text/javascript">
if(document.getElementsByName){
//首先获取自动登录这个表单，然后在该表单上绑定鼠标事件
var input = document.getElementsByTagName(‘label‘)[0];//这里用label可以实现当鼠标移动到选择中或文字中都能够实现该js效果//在鼠标事件内先获取到div1这个提示文本元素
var div1 = document.getElementById("div1");
input.onmouseover=function(){//当鼠标移入将该元素的CSS样式中的display属性的值改为block
div1.style.display=‘block‘;
}
input.onmouseout=function(){//当鼠标移出时再将该元素的CSS样式中的display属性的值改为none
div1.style.display="none";
}}else{
alert("浏览器不兼容，请更换")
}
</script>
js实例_当鼠标移动到某个元素上时在元素下面显示一段提示文字,布布扣,bubuko.com