Js学习之路一 --- 鼠标提示框

最新推荐文章于 2024-08-09 15:35:05 发布

不如喫茶去

最新推荐文章于 2024-08-09 15:35:05 发布

阅读量1.0k

点赞数 1

分类专栏： Js学习之路文章标签： javascript 鼠标事件 js学习

本文链接：https://blog.csdn.net/qq_32737755/article/details/77891511

版权

Js学习之路专栏收录该内容

14 篇文章 0 订阅

订阅专栏

  一个后台程序员，不会js是一件很悲催的事情，比如本小白..................
  在日常开发中，太多太多的js代码只能靠前端来帮助修改。
  实在是很悲催~
  所以本白现在开始正式学习js，并将记录js学习过程。

学习js第一课：写一个鼠标提示框，即鼠标放上显示出提示框信息，鼠标移走提示框消失。
主要用到：onmouseover onmouseout 两个事件
js中的 document.getElementById
下面是代码：

<!DOCTYPE html>
<html>
      <head>
           <meta http-equiv="content-type" content="text/html;charset=utf-8">
           <meta name="author" content="zsh">
           <meta name="keywords" content="">
           <meta name="description" content="">
           <title>乌啦啦啦啦啦</title>
           <style type="text/css">
           #div1 {
            width: 200px;
            height: 100px;
            background: #ccc;
            border:1px solid #999;
            display: none;
           }
           </style>
     </head>
     <body>
        <input type="checkbox" onmouseover="document.getElementById('div1') .style.display='block';" onmouseout="document.getElementById('div1').style.display='none';" value="" />哈哈哈
        <div id="div1">
            啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
        </div>
     </body>
     <script type="text/javascript">

     </script>
</html>

效果如下：鼠标放到input上提示框显示：
这里写图片描述
鼠标从input上移开提示框消失：

分析：主要原理为控制div 的样式 display ：none、block

下面这种写法也可以在IE浏览器显示，但是在火狐浏览器中会报错！所以为了兼容性，大家伙还是不要偷懒，将 document.getElementById 加上

<input type="checkbox" onmouseover="div1.style.display='block';" onmouseout="div1.style.display='none';"/>

                个人助记理解：get（获取）Element（元素）By（用）Id
                         翻译过来就是   通过id获取元素

不如喫茶去

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录