标签：style blog class code java ext
效果：
当鼠标不在自动登录上时，只显示自动登录这个表单，下面的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
js实例_当鼠标移动到某个元素上时在元素下面显示一段提示文字
标签：style blog class code java ext
原文地址：http://www.cnblogs.com/LO-ME/p/3720757.html
