js实例_当鼠标移动到某个元素上时在元素下面显示一段提示文字

浏览数：67 / 时间：2015年06月11日

效果：

　　当鼠标不在自动登录上时，只显示自动登录这个表单，下面的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>