鼠标放在一个连接上，会显示图片(类似tooltip)

最新推荐文章于 2020-10-14 21:12:55 发布
转载 最新推荐文章于 2020-10-14 21:12:55 发布 · 1.4k 阅读 · 0
文章标签：

#function #html #div

本文介绍了一个简单的HTML页面实现鼠标悬停显示图片的效果。通过使用HTML的<a>标签与<div>标签结合JavaScript来完成这一功能。当鼠标移至链接上时，会显示一张预设的图片。
<HTML>
<body>
<a href="www.sina.com" id="i" onmouseover="show(this)" onmouseout="hide()">免费电影</a>
<div id="m" style="BORDER-RIGHT:black 1px solid;PADDING-RIGHT:20px;BORDER-TOP:black 1px solid;PADDING-LEFT:20px;Z-INDEX:100;VISIBILITY:hidden;PADDING-BOTTOM:20px;BORDER-LEFT:black 1px solid;WIDTH:80px;PADDING-TOP:20px;BORDER-BOTTOM:black 1px solid;POSITION:absolute"
onmouseover="show(i)" onmouseout="hide()">
<img src="meng.jpg"></img>
</div>
<script>  
function  show(o){  
var  m=document.getElementById("m")  
m.style.pixelLeft=getL(o)  
m.style.pixelTop=getT(o)+o.offsetHeight  
m.style.visibility=''  
}  
 
function  hide(){  
document.getElementById("m").style.visibility='hidden'  
}  
 
function  getL(e){  
var  l=e.offsetLeft;  
while(e=e.offsetParent){  
l+=e.offsetLeft;  
}  
return  l  
}  
 
function  getT(e){  
var  t=e.offsetTop;  
while(e=e.offsetParent){  
t+=e.offsetTop;  
}  
return  t  
}  
</script>
</body>
</HTML> 
史上最全wireshark使用教程，8万字整理总结，建议先收藏再耐心研读
孙叫兽的博客
07-14 3万+
目录 第1章介绍... 1 1.1.什么是Wireshark. 1 1.1.1.主要应用... 1 1.1.2.特性... 1 1.1.3.捕捉多种网络接口... 2 1.1.4.支持多种其它程序捕捉的文件... 2 1.1.5.支持多格式输出... 2 1.1.6.对多种协议解码提供支持... 2 1.1.7.开源软件... 2 1.1.8.Wireshark不能做的事... 2 1.2.系通需求... 2 1.2.1.一般说明... 2 ...
零基础小白学Node-RED（07）：综合案例分析
知无涯
10-25 5045
讲解Node-RED的综合示例
鼠标移动到链接上，显示该链接对应的图片；并随着鼠标移动，图片移动。
csdn_csy的博客
12-06 3148
静态页面显示动态图：(图片和该页面放在同一目录下，直接浏览器打开页面。图片名称下载后如果不是“身份证照片.jpg”，需要改一下。) &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;js弹出图片&lt;/title&
鼠标移动到链接就显示图片
09-08
当鼠标移动到链接就显示相应图片，非常简洁方便
js和CSS3鼠标悬停超链接展示图片特效
12-11
这是一款js和CSS3鼠标悬停超链接展示图片特效。该特效中，当鼠标悬停到超链接上面时，会在超链接下面显示一张设定好的图片。该特效中提供了10种打开图片时的炫酷动画效果。
（源码实例）通过层DIV实现，当鼠标放在链接上面，显示图片及文字
冯立彬的博客
09-21 1万+
（源码实例）通过层DIV实现，当鼠标放在链接上面，显示图片及文字层的位置是可改变、大小是可改变的、可见是可调的，这个就可以用于实现一些特殊的效果，如隐显、渐显等，下面是一个鼠标事件的层操作，当鼠标放在上面的时候可以显示定位显示隐藏的层： 示例展示一：www.sina.com" id="i" onmouseover="show(this,m)" onmouseout="hide(m)">鼠标
oxyplot.wpf中实现鼠标悬停显示所有数据中的当前数值，即同X点多Y点？
最新发布
12-02
在XAML中，添加一个用于显示信息的TextBlock，将其放在PlotView的同一容器中（比如Grid），并设置其位置（例如右上角）和样式。 2. 在PlotView的MouseMove事件中，获取鼠标位置，转换为数据坐标，然后计算所有...
Python3 PyQt5 窗口(国际化/QMainWindow/QWidget/QDialog)
Luzhuo 的博客
02-24 9202
Python3 PyQt5 窗口(国际化/QMainWindow/QWidget/QDialog) 本文由 Luzhuo 编写,转发请保留该信息. 原文: http://blog.youkuaiyun.com/rozol/article/details/68938984 PyQt5基本介绍见: PyQt5 Qt Designer (Qt设计师) 简介 窗口主要分为: QMainWindow(主窗口) ...
用flask+echarts打造一个数据可视化大屏幕
热门推荐
凯哥大数据——刘凯的博客
10-14 2万+
文章目录1. big_screen项目说明2. big_screen项目文件布局3. 四大模块核心代码分析3.1 数据准备模块3.2 flask网页服务模块3.3 网页视图模块a. 网页大标题b. 左右两栏的图表c. 中间一栏的图表d. 图表echarts属性设置3.4 static静态元素分析a. 显示时间的函数b. 页面淡入和视图自适应的函数4. 总结 1. big_screen项目说明 源自github上逛到的一个项目，用flask和echarts实现了一个大屏幕显示，运行app.py后，在网页上输入
js 实现 鼠标放到图片上会显示另外一张图片
03-31
js 实现 鼠标放到图片上会显示另外一张图片! 值得下载看看!资源免费,大家分享!!
HTML5鼠标悬停超链接显示图片特效
06-10
这是一款非常特色的HTML5鼠标悬停超链接显示图片特效，当鼠标悬停到超链接文字上时，会在超链接下面显示一张设定好的图片或者多张图片切换预览效果。
鼠标放上显示图片
erdouzhang
03-22 1953
在线展示鼠标放上显示图片html:<body> <div class="box"> <a href="#"> <span>二维码</span> <img src="img/二维码.jpg" alt="扫一扫"> </a> </div> </body>css:<style> .box a { text-decoration: no
通过层DIV实现，当鼠标放在链接上面，显示图片及文字
SailingAptech的专栏
05-11 252
通过层DIV实现，当鼠标放在链接上面，显示图片及文字 层的位置是可改变、大小是可改变的、可见是可调的，这个就可以用于实现一些特殊的效果，如隐显、渐显等， 下面是一个鼠标事件的层操作，当鼠标放在上面的时候可以显示定位显示隐藏的层： [code="html"] 示例展示一： 鼠标放在上面显示图片查看有边框的层 注：这个层是加了边框的 我的优快云博客 网易 示例...
鼠标移至a标签，浮动显示图片
qq_37212970的博客
06-03 5369
:hover 选择器用于选择鼠标指针浮动在上面的元素。 提示：:hover 选择器可用于所有元素，不只是链接。 提示：:link选择器设置指向未被访问页面的链接的样式，:visited选择器用于设置指向已被访问的页面的链接，:active选择器用于活动链接。 注释：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。 ...
简单的图片飘C#(Winform)
王超的专栏
07-03 716
//4个PictureBox ,4个Timer控件 然后把下面的复制上即可public partial class Form1 : Form { public int x1 = 8; public int x2 = 148; public int x3 = 248; public i
是鼠标放在markLine线上，显示tooltip，这个ToolTip上显示当前markLine的name跟yAxis值
08-20
在 ECharts 中，若希望在鼠标悬停于 `markLine` 上时，在 Tooltip 中显示其名称和对应的 Y 轴值，可以通过配置 `markLine.label.formatter` 和全局 `tooltip.formatter` 来实现统一的显示效果。该方式适用于 ECharts 3.0 及以上版本，确保在不同数据点和标线之间显示一致的信息格式。 ### 配置 markLine 的标签格式 通过设置 `markLine.label.formatter` 函数，可以自定义 `markLine` 上显示的文本内容。该函数接收一个 `params` 参数，其中包含 `name` 和 `value` 属性，分别对应标线的名称和值数组（通常 `value[1]` 表示 Y 轴值）。 ```javascript markLine: { label: { show: true, formatter: function(params) { return params.name + ': ' + params.value[1]; } }, data: [ { name: '目标线1', yAxis: 200 }, { name: '目标线2', yAxis: 150 } ] } ``` 该配置确保了 `markLine` 上直接显示名称和 Y 轴值，同时为后续 Tooltip 显示提供了结构基础[^1]。 ### 统一 Tooltip 显示格式 为了使 Tooltip 与 `markLine` 标签格式一致，可在 `tooltip.formatter` 中统一处理所有数据点和标线的显示逻辑。以下示例中，`params` 是一个数组，包含了当前 X 轴下所有系列的数据点信息： ```javascript tooltip: { trigger: 'axis', formatter: function(params) { return params[0].name + '<br/>' + params.map(item => item.seriesName + ': ' + item.value).join('<br/>'); } } ``` 该配置使得当鼠标悬停在 `markLine` 上时，Tooltip 会显示标线名称和对应的 Y 轴值，与 `markLine.label.formatter` 中的格式保持一致。 ### 完整示例配置 结合上述配置，以下是完整的 ECharts 选项配置示例： ```javascript option = { tooltip: { trigger: 'axis', formatter: function(params) { return params[0].name + '<br/>' + params.map(item => item.seriesName + ': ' + item.value).join('<br/>'); } }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ name: '示例数据', type: 'line', data: [150, 230, 224, 218, 135, 147, 260], markLine: { label: { show: true, formatter: function(params) { return params.name + ': ' + params.value[1]; } }, data: [ { name: '目标线1', yAxis: 200 }, { name: '目标线2', yAxis: 150 } ] } }] }; ``` 此配置实现了在鼠标悬停于 `markLine` 上时，Tooltip 显示名称和 Y 轴值的功能，并确保了整体图表的提示信息风格统一。 ---
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值