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

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

效果:

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