鼠标提示框（第一个JS特效）

梁什么鸭，

于 2021-05-01 15:49:35 发布

阅读量370

点赞数 1

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/Lm_choose_live/article/details/116330439

版权

Javascript 专栏收录该内容

74 篇文章 2 订阅

订阅专栏

项目场景：

实现效果：当鼠标停在复选框时，显示提示框；移出鼠标时，隐藏提示框。

首先了解到事件：简单来说就是用户的一些操作。等后面学到比较深的时候会发现，有些事件并不是用户造成的。此阶段先不管。

特效基础：
事件驱动：onmouseover
特效实现原理概括：响应用户操作，对页面元素（标签）进行某种修改

问题描述：

【注】在前端中最让人头疼郁闷的就是兼容性问题（主要是IE浏览器）
例如下面的栗子：

<style>
  #click {
    width: 200px;
    height: 100px;
    background-color: #ccc;
    display: none;
  }
</style>

<body>
<input type="checkbox"
       onmouseover="click.style.display = 'block'"
       onmouseout="click.style.display = 'none'">
<div id="click" >提示信息</div>
</body>

原因分析：

以上代码在IE中运行正常，并能得到预期效果，但在FireFox和低版本的chrome中会出现“click is not defined”，简单来说是click没有定义

为什么说click没有定义呢？
上面栗子中我们直接拿着id：click直接用了，实际是不兼容的写法

解决方案：

兼容写法是使用document.getElementById('id名')

<input type="checkbox"
       onmouseover="document.getElementById('click').style.display = 'block'"
       onmouseout="document.getElementById('click').style.display = 'none'">

总结

编写JS的流程
1、首先有个--布局：HTML+CSS （稳固的，没有任何兼容问题，必须特别靠谱）
2、--属性：确定要修改哪些属性
3、--事件：确定用户做哪些操作（产品设计）
4、--编写JS：在事件中，用JS来修改页面元素的样式

梁什么鸭，

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
鼠标提示框（第一个JS特效）

项目场景：实现效果：当鼠标停在复选框时，显示提示框；移出鼠标时，隐藏提示框。首先了解到事件：简单来说就是用户的一些操作。等后面学到比较深的时候会发现，有些事件并不是用户造成的。此阶段先不管。特效基础：事件驱动：onmouseover特效实现原理概括：响应用户操作，对页面元素（标签）进行某种修改问题描述：【注】在前端中最让人头疼郁闷的就是兼容性问题（主要是IE浏览器）例如下面的栗子：<style> #click { width: 200px;
复制链接

扫一扫