鼠标在文本上移动时层的显示与消失

最新推荐文章于 2023-11-06 17:19:32 发布
最新推荐文章于 2023-11-06 17:19:32 发布
阅读量748 收藏
点赞数
分类专栏： Html 文章标签： function javascript border 电话 div table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangm1203/article/details/1684983
版权
把这里的所有代码都放在<body>与</body>之间即可
<script language= javascript >
<!--
function hiddiv()
{
document.all.ab.style.display="none"
}
function showdiv()
{
document.all.ab.style.display=""
document.all.ab.style.left=window.event.clientX+15
document.all.ab.style.top=window.event.clientY
}
//-->

</script>
<div id=ab style="position: absolute; width: 126; height: 27; background-color: orange; display: none; left: 11; top: 36">地址：园区星海街东侧<br>电话：0512-65103588-206</div>

<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td width="150"><a href="#" οnmοuseοut=hiddiv(); οnmοusemοve=showdiv();>发现之旅</a></td>
</tr>
</table>

　　当然了这里的功能比较简单，没有对浏览器类型进行判断，本人不才，就把这个问题留给各位了，欢迎每一位朋友来修改这个问题。
　　在这里还有一个问题就是如果文本不止一个、定义的层也就不止一个。如果还用这样的方法就会出错，我对这个问题研究了一下，用下面的这个方法就可以解决了。
<script language=javascript>
<!--
function hiddiv(blah)
{
blah.style.display="none"
}
function showdiv(blah)
{
blah.style.display=""
blah.style.left=window.event.clientX+15
blah.style.top=window.event.clientY
}
//-->

</script>
<div id=ab style="position: absolute; width: 126; height: 27; background-color: orange; display: none; left: 11; top: 36">地址：园区星海街东侧<br>电话：0512-65103588-20611</div>

<div id=cd style="position: absolute; width: 126; height: 27; background-color: orange; display: none; left: 11; top: 36">地址：新区明星街南侧<br>电话：0512-65103588-20622</div>

<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td width="150"><a href="#" οnmοuseοut=hiddiv(ab); οnmοusemοve=showdiv(ab);>发现之旅</a></td>
</tr>
<tr>
<td width="150"><a href="#" οnmοuseοut=hiddiv(cd); οnmοusemοve=showdiv(cd);>和风景苑</a></td>
</tr>
</table>

　　如果有更多的文本和层的话以此类推即可。
　　在这里有几点要说明的就是：
　　1、showdiv中带参数时再用document.all.ab.style.display=""就不适用了，关于这点朋友们可以参考有关书籍
　　2、onmouseover与onmousemove的区别是：当鼠标移过当前对象时就产生了onmouseover事件,当鼠标在当前对象上移动时就产生了onmousemove事件，只要是在对象上移动而且没有移出对象的，就是onmousemove事件。我当前就是因为这个onmouseover事件惹的祸要不早就搞定了。今天写出来让朋友们也能注意这一点。
　　 
必败客
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery 弹出层跟随鼠标移动
04-22
鼠标移上某一位置，随即在鼠标附近弹出层，鼠标移动则层移动
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
09-04
在网页设计中，有时我们需要为超链接添加一些交互性更强的特效，比如当鼠标移动到超链接上时显示一个提示信息，并且这个提示信息能够随着鼠标的移动而移动。这样的功能可以提供更好的用户体验，帮助用户更快地理解...
鼠标点击文本框后，里面的文字就消失，鼠标离开文本框后，里面的文字又会显示
02-02 1万+
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">                         鼠标点击文本框后，里面的文字就消失，鼠标离开文本框后，里面的文字又会显示                               onmouseover=this.focus();this.select()
鼠标移上去出现显示层，并且出现在同一个div中
笑笑
08-19 2432
div class="a">     img src="a.jpg" />     div class="b" >         这里是图片的名字     div> div> style> .a{width:100px; height:100px; position:relative;} .b{width:100px; height:20px; background:url(/b
鼠标移入显示遮罩层
weixin_44509418的博客
10-05 1960
css鼠标移入元素在上方显示遮罩层到底是怎么做的呢？今天就由我来为大家解答这个问题，在这里我用两种方法来写一下，有需要的小伙伴记得收藏，以备不时之需… 第一种方法： 第一种方法就是给需要遮罩层的元素同级再添加一个元素来达到这样的效果，让我们看一下代码怎么写： html代码： <div class="box"> <a href="http://materials.windfish.cn/jxy1-video.mp4" target="_blank">
css-实现鼠标移至图片上显示遮罩层
热门推荐
Asuna的博客
05-09 1万+
1、将遮罩层html代码与图片放在一个div 我是放在 .img_div里。 &lt;div class="img_div"&gt; &lt;img src="./images/paella-dish.jpg"&gt; &lt;a href="#"&gt; &lt;div class="mask"&gt;
js鼠标移动在title中显示图片的效果代码
10-29
在Web开发中，这些技术经常被用于实现用户交互功能，例如当鼠标悬停或移动到某个元素上时，显示额外的信息或者图像等。 #### 二、需求分析 根据题目描述，“当鼠标移动时，在title提示框中，显示出设定的图片。”...
jqeruy 插件 鼠标经过显示文本信息
07-15
在网页设计中，有时我们需要在用户将鼠标悬停在特定元素（如图片）上时显示额外的文本信息，以提供更丰富的交互体验。jQuery 插件为此类需求提供了一个便捷的解决方案。本篇文章将详细介绍一个名为“jqeruy”（可能...
鼠标移动到图片上显示图片提示效果
06-11
/* 当鼠标悬停在图片上时显示提示 */ .image-container:hover .tooltip { display: block; } ``` 为了更贴近腾讯网的效果，可能还需要考虑以下几点： 1. **动画效果**：可以添加CSS过渡动画，让提示信息的出现和...
Vue实现鼠标经过文字显示悬浮框效果的示例代码
10-14
在Vue.js中，实现鼠标经过文字时显示悬浮框效果，通常涉及事件监听和DOM操作。以下是一个详细的步骤解释： 1. **需求分析**： 在Vue项目中，我们希望当鼠标移到特定的文字或按钮上时，能在鼠标附近显示一个悬浮框...
鼠标移动或划过文字弹出层
09-14
鼠标移动弹出层 鼠标移动弹出层 鼠标移动弹出层 鼠标移动弹出层
javascript实现鼠标移动弹出层的显示与隐藏
12-13
当鼠标指向某一个连接或标签时，就会显示相应的详细信息，鼠标移开时，信息就消失
鼠标选中文本框，默认内容消失
11-12
鼠标选中文本框，默认内容消失，没有新内容输入的时候，鼠标点击文本框以为的区域默认内容重新显示。
提示框，鼠标经过提示文字框,提示弹出层
freejs
07-22 339
提示框，鼠标经过提示文字框,提示弹出层  可以指定位置显示层 演示     XML/HTML Code &lt;h3&gt;Positioning&lt;/h3&gt;                   &lt;p&gt;The positioning options of Tippy are really powerful. Say you &lt;span ...
CSS实现鼠标移至图片上显示遮罩层及文字效果
最新发布
蓝胖子的博客
11-06 1878
CSS实现鼠标移至图片上显示遮罩层及文字效果
跟随鼠标的弹出层
weixin_30622181的博客
01-23 211
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <...
【CSS】鼠标移动到元素上方显示 / 移出盒子范围隐藏案例 ( 子绝父相 | 显示隐藏元素对象 | 鼠标经过样式设置 | 半透明遮罩设置 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-15 4167
一、鼠标移动到元素上方显示 / 移出盒子范围隐藏案例要点分析 1、子绝父相 2、显示隐藏元素对象 3、鼠标经过样式设置 4、半透明遮罩设置 二、代码示例
弹出层居中随鼠标滚动而滚动
SJian123的专栏
06-02 1134
无标题文档 .joinclub { width: 440px; height: 282px; border: 1px solid #6E665A; border-radius: 5px; background: #fff; padding-top: 10px; position: absolute; z-index: 99999999; display: none; le
文本编辑框鼠标丢失问题
05-09 5873
今天遇到一个非常奇怪的事情，所有的文本编辑框，鼠标都丢失了，非常影响阅读代码。现象如下：当鼠标移动带文本框内，鼠标箭头就不见了。通过研究，发现在系统的鼠标配置里面修改一下文本鼠标样式可以解决这个问题：控制面板===》鼠标==》指针==》选定文本==》更换为箭头修改之后，在把鼠标放进文本框里面，就会出现一个金黄色的鼠标箭头。...
用python编写程序，绘制一个周期的正弦曲线，并实现下面的功能：1）鼠标进行图形区域之后，设置图形背景色为黄色，鼠标离开图形区域时将其恢复为白色；2）当鼠标移动至正弦曲线附近（距离小于2个像素）时在鼠标上方出现文本标注当前值，鼠标远离曲线时文本标注自动消失。
06-02
好的，以下是实现这个功能的Python代码： ```python import matplotlib.pyplot as plt import numpy as np # 定义正弦函数 def sin_function(x): return np.sin(x) # 生成 x 和 y 值 x = np.arange(0, 2 * np.pi, 0.01) y = sin_function(x) # 绘制正弦曲线 fig, ax = plt.subplots() line, = ax.plot(x, y) # 设置图形背景色为白色 fig.patch.set_facecolor('white') # 定义鼠标移动事件处理函数 def on_move(event): # 如果鼠标在图形区域内 if event.inaxes == ax: # 设置背景色为黄色 fig.patch.set_facecolor('yellow') # 获取鼠标的坐标 x, y = event.xdata, event.ydata # 如果距离正弦曲线小于2个像素 if abs(y - sin_function(x)) < 2: # 在鼠标上方出现文本标注当前值 ax.text(x, y+0.5, f'{sin_function(x):.2f}', ha='center') else: # 鼠标远离曲线时文本标注自动消失 ax.texts = [] else: # 鼠标离开图形区域时将其恢复为白色 fig.patch.set_facecolor('white') ax.texts = [] # 绑定鼠标移动事件处理函数 fig.canvas.mpl_connect('motion_notify_event', on_move) # 显示图形 plt.show() ``` 以上代码使用 `matplotlib` 库绘制了一个周期的正弦曲线，并实现了以下两个功能： 1. 当鼠标进入图形区域时，将图形背景色设置为黄色，当鼠标离开图形区域时将其恢复为白色。 2. 当鼠标移动至正弦曲线附近（距离小于2个像素）时在鼠标上方出现文本标注当前值，鼠标远离曲线时文本标注自动消失。 注意：代码中的 `sin_function` 函数定义了一个正弦函数，用于生成正弦曲线的 y 值。函数中的 `np.sin` 函数是 `numpy` 库中的正弦函数。在代码中我们使用了 `numpy` 库中的 `arange` 函数生成了一组 x 值，步长为 0.01，范围为 0 到 2π。`fig, ax = plt.subplots()` 用于创建一个新的图形并返回一个 `Figure` 和一个 `Axes` 对象。`ax.plot(x, y)` 用于绘制正弦曲线，返回一个 `Line2D` 对象。`fig.patch` 是 `Figure` 对象的属性，用于设置图形的背景色。`ax.text()` 用于在指定的坐标位置添加文本标注，`ax.texts` 是 `Axes` 对象的属性，是一个文本标注列表，用于在需要时清除文本标注。`fig.canvas.mpl_connect()` 用于绑定鼠标移动事件处理函数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值