HTML中通过js 自定义一个鼠标悬停后立刻显示的Title（附效果图）

1、通过事件实时获取鼠标当前对于窗体的相对位置，代码如下

<script>document.onmousemove = mouseMove;var posx;var posy;function mouseMove(event){var e = event || window.event;var scrollx = document.documentElement.scrollLeft || document.body.scrollTop;var scrolly= document.documentElement.scrollTop || document.body.scrollTop;posx = e.pageX || e.clientX + scrollx;posy = e.pageY || e.clientY + scrolly;
//                console.log(x);
//                console.log(y);}
</script>

2、对需要自定义显示Title的控件设置mouseover以及mouseleave事件函数，以下是为了展现效果写的函数，ShowTitle中的内容可自行修改都是针对css的设置，通过js获取控件然后通过innertext设置自定义Title中的文字内容。

         function ShowTitle() {var Title = document.getElementById("title");var str ="测试悬停弹框asdasdsadsadsasadsasadasd"Title.style.display = "block";Title.style.top = posy+'px';Title.style.left = posx+'px';Title.style.position = "absolute";Title.style.zIndex=9999;Title.style.border="solid black 1px";Title.style.backgroundColor = "white";Title.style.width="auto";Title.innerText=str;}function HiddTitle(){document.getElementById("title").style.display="none";}

完整代码如下(图片自行替换)：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">.centerClass{position: absolute;top: 50%;left: 50%;}</style>
</head>
<body><div  style="position: absolute;z-index:999;background-color: antiquewhite;"><img src="img/posicon.png" title="测试" onmouseover="ShowTitle()"             onmouseleave="HiddTitle()"></div><div id="title" style="display: none;"></div><script>document.onmousemove = mouseMove;var posx;var posy;function mouseMove(event){var e = event || window.event;var scrollx = document.documentElement.scrollLeft || document.body.scrollTop;var scrolly= document.documentElement.scrollTop || document.body.scrollTop;posx = e.pageX || e.clientX + scrollx;posy = e.pageY || e.clientY + scrolly;
//                console.log(x);
//                console.log(y);}function ShowTitle() {var Title = document.getElementById("title");var str ="测试悬停弹框asdasdsadsadsasadsasadasd"Title.style.display = "block";Title.style.top = posy+'px';Title.style.left = posx+'px';Title.style.position = "absolute";Title.style.zIndex=9999;Title.style.border="solid black 1px";Title.style.backgroundColor = "white";Title.style.width="auto";Title.innerText=str;}function HiddTitle(){document.getElementById("title").style.display="none";}</script>
</body>
</html>

注意把握控件的宽和高，会影响鼠标实时去位置和onmouseover ，onmouseleave事件的触发。这里用了div包裹img未设置img宽高所以实际触发会以外部div为准。

鼠标进入前效果图：

鼠标进入后效果图：

HTML中通过js 自定义一个鼠标悬停后立刻显示的Title（附效果图）相关推荐

鼠标悬停文字上显示图片
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
axure中交互样式设置鼠标悬停后其他的按下选中无效_Axure交互动作
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 axure中交互样式设置鼠标悬停后其他的按下选中无效_交互区域 -- 交互动作启用情形+交互事件+交互动作三个部分构成了整个原型的交互逻辑.启用情形是 ...
去除ECharts圆环鼠标悬停时中间显示的文字
ECharts中鼠标悬浮到图形元素上时,一般会出现高亮的样式,主要是通过 emphasis 属性来自定义,series中有下述代码的时候,鼠标悬停到图形元素上时,会在图形的中间位置显示图形块对应的文字 ...
html合并单元格怎么把字竖着,电脑excel单元格中文字如何在合并单元格后竖排显示...
电脑excel单元格中文字如何在合并单元格后竖排显示 excel软件是我们现在经常使用的数据处理工具之一,接下来小编就教大家怎样在软件中设置合并单元格之后竖排显示文字. 具体如下: 1. 首先我们需要 ...
1.Maven+SpringMVC+Eclipse软件安装配置，Maven报插件错误，Eclipse总是卡死的解决办法，导入一个maven工程后一直显示importing maven project
使用Maven+SpringMVC+Eclipse软件安装配置过程中的问题: 1.Eclipse总是卡死的解决办法: 一:内存不足所以会卡死,配置一下eclipse.ini修改这几个值就好了-X ...
导入一个maven工程后一直显示importing maven projects
解决方法,导入一个maven工程后一直显示importing maven project 本文使用的是文中的 2.因为eclipse上一次未正常关闭,导致启动卡死,错误日志为: [plain] v ...
用js做一个鼠标惯性动画
用js做一个简单的鼠标惯性动画 <style type="text/css">#div1{width: 50px;height: 50px;background: re ...
asp:boundfield 鼠标悬停后显示_设计了100张图表后，我学到了哪些经验？
作者:William Bengtsson 译者: luserry 原文:https://medium.com/@william.bengtsson/learnings-from-designing-g ...
鼠标悬停显示图片html5,JavaScript 鼠标悬停图片，显示隐藏文本
Unsplash 当我们在浏览网页的时候,描述性的文本通常不会跟在图片之后,而是当我们将鼠标移至图片上时,才会将文本显示出来,这样的好处是,以突显图片为主,并节省布局空间 HTML 结构如下世界上最 ...

HTML中通过js 自定义一个鼠标悬停后立刻显示的Title（附效果图）

HTML中通过js 自定义一个鼠标悬停后立刻显示的Title（附效果图）相关推荐

最新文章

热门文章