首页 > 代码库 > 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>
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。