【javascript-基础小练习】跟随鼠标移动的提示框

布局是很重要的，根据不同的布局效果也会不同(以下仅供参考)

结构部分

<body><div class="box"><h2><span>这是标题1这是标题1这是标题1</span><!-- em是为了阻挡鼠标移动到p身上从而导致移动事件失效，离开事件生效 --><em></em><p>这是标题1的提示信息提示信息提示信息111提示信息提示信息提示信息提示信息提示信息提示信11111息提示信息提示111信息提示信息提示信息提示信11息提示信息</p></h2><h2><span>这是标题2标题2标题2</span><em></em><p>这是标题2的提示信息标题2的提示信息标题2的提示信息标题2的提示信息标题2的提示信息标题2的提示信息</p></h2></div>
</body>

布局部分

<style>.box{width: 400px;border: solid 1px black;margin: 50px auto;}.box h2{font-size: 16px;height: 60px;position: relative;margin: 30px 0;}.box h2 span{display: block;height: 40px;line-height: 40px;background: #eee;padding: 10px 0;cursor: pointer;}.box h2 p{margin: 0;font-size: 14px;font-weight: normal;width: 200px;background: #ccc;position: absolute;left: 0;top: 0;z-index: 1;border: solid 2px #aaa;display: none;}/* em是为了阻挡鼠标移动到p身上从而导致移动事件失效，离开事件生效 */.box h2 em{position: absolute;left: 0;top:0;right:0;bottom:0;z-index: 2;}</style>

js部分

<script>var aspan = document.querySelectorAll(".box h2 em");for(var i=0;i<aspan.length;i++){// 鼠标进入aspan[i].onmouseover = function(){// 显示提示框this.nextElementSibling.style.display = "block";}// 鼠标移动aspan[i].onmousemove = function(eve){var e = eve ? eve : window.event;// 提示框var p = this.nextElementSibling;// 使用相对于事件目标的坐标：e.offsetX/Y// 设置给提示框，实现跟随鼠标移动p.style.left = e.offsetX + "px";p.style.top = e.offsetY + "px";// 相对于页面：e.pageX/Y// ...}// 鼠标离开aspan[i].onmouseout = function(){// 隐藏提示框this.nextElementSibling.style.display = "none";}}</script>

【javascript-基础小练习】跟随鼠标移动的提示框相关推荐

html5鼠标悬停提示框,HTML5鼠标悬停动画提示框特效源码，前端必备
效果图今天给各位官人带来的是,HTML5鼠标悬停动画提示框特效源码! 效果炫图生动,给网站带来较好的交互体验! 由于代码过长需要文档版源码来我的前端群581549454,已上传到群文件废话不多说, ...
利用javaScript+css实现图片跟随鼠标联动效果页面
以前做小型的项目的时候总想着可以做一个很炫酷的主页面来,以前做过一个汽车销售管理系统的主页面,觉得很不错.虽然写这个的人不是我,但是我们觉得可以保存下来以便日后使用和参考.先看一下效果图!这个是可以跟 ...
DIV层跟随鼠标位置显示提示
虽然IE也带提示功能,只要给title属性赋值,如下代码 <a href="http://chenxp2032.blog.163.com/blog/#" title=&quo ...
OPENCV图像处理基础（五）鼠标事件画个框
在GUI编程中会涉及到鼠标事件,通过鼠标事件可以使得人和机器的交互更为便捷.opencv中提供了一种以回调函数实现的鼠标事件机制. 下面是一个例子,通过鼠标在一张图片上画出任意大小的矩形框. 效果如下 ...
cmake取消宏定义_Excel基础丨取消excel中宏安全提示框
很多高手都喜欢使用"宏"命令来提高办公工作效率.但在 Microsoft Office 程序中使用宏时,总会弹出宏安全警告,这让使用者倍感麻烦.而如果把宏的安全级设置为" ...
JavaScript实现弹出浏览器的三种提示框：提示信息框、确认框和输入文本框
浏览器的三种提示框 1.alert()提示信息框 2.confirm()提示确认框 3.prompt()提示输入文本框 1.alert()提示信息框效果图: 实现代码: <script> ...
微信小程序调试器的 console提示框的无用黄色警告关闭 --- 根据 sitemap 的规则[0]，当前页面 [pages/index/index] 将被索引
内容 Sat Jul 11 2020 17:51:58 GMT+0800 (中国标准时间) sitemap 索引情况提示 VM18961:1 根据 sitemap 的规则[0],当前页面 [pages ...
JavaScript实现一串div跟随鼠标移动效果（幻影效果）
JavaScript实现一串div跟随鼠标移动效果上一篇博文我们说到了利用JavaScript实现div块跟随鼠标移动的效果.现在来讲一个进阶版,实现一串div跟随鼠标移动效果,鼠标幻影效果.如图: ...
JavaScript基础题目(附答案)
声明:本文是以题目的形式运用js知识点解决问题来提升对js知识点的理解格式为题目;方法;原因;缺点(如果方法有缺点的话);实现代码; 文章目录基础篇 1.分支结构 2.循环 3.函数 4.递归 ...
js的alert弹框中怎么写html,JavaScript基础教程之alert弹出提示框实例
alert 命令弹出一个提示框为便于对 JavaScript 有一个直观的认识,本节会提供几个简单的实例供 JavaScript 入门学习之用.下面的代码是一个弹出提示框的例子: alert(&qu ...

【javascript-基础小练习】跟随鼠标移动的提示框

【javascript-基础小练习】跟随鼠标移动的提示框相关推荐

最新文章

热门文章