鼠标放在超链接上,显示div。移开后隐藏div。

author author     2023-05-02     766

关键词:

我做了一个超链接, 当鼠标移上去显示一个DIV。                                 当鼠标离开后继续隐藏DIV。初学者,细细道明。

1、首先我们在html里定义一个div,id为‘mouse_div’,然后定义该div的样式,主要是定义position,让其绝对定位。

2、然后通过JS脚本来做随鼠标移动的效果。先引入jquery脚本,因为用到jquery操作dom。

3、最后添加代码,在页面加载完后,给页面添加鼠标mousemove事件,在事件函数里,调用 moving方法,就实现div鼠标浮动效果。

4、刷新页面,可以看到现在的效果如图。

5、把移动的div做得漂亮一点。先把div里的文字去掉。我们不显示文字,显示一张图片。

6、然后修改div的样式,添加背景图,设置div的长度和宽度。

7、再次看下页面效果,现在随鼠标移动的是一个漂亮的蝴蝶了。

参考技术A <a href="#" id="outs">测试</a>
<div id="div1" style="display:none;">111111111 </div>
<script language="javascript">
document.getElementById("outs").onmouseout=function()//当鼠标滑出
document.getElementById("div1").style.display="none"; //改变div1的display属性

document.getElementById("outs").onmouseover=function() //当鼠标经过
document.getElementById("div1").style.display="block";

</script>
参考技术B <style type="text/css">
aposition:relative;
a divdisplay:none;color:red;width:200px;height:200px;background-color:#FF0;position:absolute;top:20px;left:20px;cursor:default;
a:hover divdisplay:block;
</style>
<a href="#">
aaa
<div>aaaa</div>
</a>
参考技术C $('超链接').hover(function()
$('你的div').show()

)

display属性鼠标悬停时显示隐藏内容,

我想问下有没有办法,让鼠标悬停在一个div块时显示的隐藏内容,在鼠标移开后还显示的。就是保留悬停的所有结果。然后悬停在另一个div块时之前的效果又没了,保留现在的。如果能只用HTML和CSS解决最好,别的(麻烦写下注... 查看详情

易语言鼠标放到图片上显示按钮并能点击,移开后按钮消失

我用时针做取鼠标所在窗口句柄=图片框1.取窗口句柄可以实现鼠标放上去后按钮出现但是一移开按钮就消失根本无法点击请问具体应该怎么实现另外如何在透明到桌面后除了图片位置其他地方都不妨碍点击?追问是的没错就是这... 查看详情

关于div标签的显示与隐藏

...击这个超链接都要加上ID并且的href="#"。把光标先放在那个DIV那里,点击“行为面板”,再选“改变属性”,“元素类型”选DIV,“元素ID”选ID选“DIV”div1"”在“属性”上选(或者自己写上)“display",在“新的... 查看详情

如何实现鼠标放在图片上显示一个播放图标?

...详细的想法是:类似音悦台的首页那些视频图片,当你的鼠标指针落在某张图片上的时候,就会出现一个播放的图标。如何才可以实现?!要什么代码?详细的步骤是怎样的?!谢谢!看图片,当鼠标滑过这个图片的时候,会出... 查看详情

flash中鼠标悬停在某按钮上显示某个图层内容,移开后该图层消失.

我想在flash中图层1上添加几个按钮,比如bt1,bt2.鼠标悬停在bt1上就显示图层2和图层1内容,在bt2上悬停就显示图层3和图层1的内容,图层2消失,如果鼠标没停留在任何按钮上,则只显示图层1的能容,试着写了如下代码,但是提示报错.bt1.on(r... 查看详情

为啥把鼠标移到div里的超链接上,就触发了这个div的mouseout事件呢?

...-color:green;margin-bottom:10px;"></div>如下图,当你把鼠标放到div上的时候,第二块div正常变成棕色:但如果你把鼠标移到超链接hehe上的时候,就触发了mouseout方法,下面那块div恢复了绿色:不是太明白 查看详情

css鼠标放在一个div上,另一个div展示出来(代码片段)

鼠标放在一个div上,另一个div展示出来。<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>鼠标悬停图片上显示文字在线演示www.divcss5.com</title><style>imgborder:0/*css注释说明:设置图片边框为0*/bod 查看详情

Jquery将DIV对齐到链接

】Jquery将DIV对齐到链接【英文标题】:JqueryAlignDIVtoLink【发布时间】:2015-01-3023:16:58【问题描述】:我正在尝试显示一个隐藏的DIV,但我希望它显示在调用它的链接旁边,而不是页面下方。页面上可能有多个超链接或图像链接,... 查看详情

css3实现鼠标放到一个div上显示出另一个隐藏的div

<!DOCTYPEhtml><htmllang="zh-cn"><head><metacharset="utf-8"/><title>CSSTestPage</title><styletype="text/css">*{margin:0;padding:0;}.cent{background:#0CF;height 查看详情

javascript鼠标悬停时在光标附近显示浮动div,隐藏在mouseout上(代码片段)

查看详情

悬停时JQuery显示/隐藏

...:12:40【问题描述】:我有三个链接,猫、狗、蛇。当我将鼠标悬停在每个链接上时,与每个链接相关的内容应该会发生变化。因此,如果我将鼠标悬停在cat上,则会出现cat内容,如果我将鼠标悬停在dog上,则cat内容会平滑消失,... 查看详情

已创建 Jquery 菜单但没有任何效果

...的显示菜单脚本,但我遇到了一些问题基本问题是当我将鼠标放在显示菜单的链接上时,菜单第一时间就完美显示了,但是,如果我将鼠标放在菜单显示的div-showuntil-上,此菜单将一直隐藏并且不会保留使用这个脚本我试图显示d... 查看详情

vb.net中,如何实现鼠标在listbox控件上移动时,鼠标所到的条目背景变黑、字变白;移开后还原?

我知道鼠标单击ListBox中的条目后可以通过ListBox.SelectedItem得到选中的值,那么怎样可以让鼠标只是移动到条目上就可以得到值呢?参考技术A复杂的不会,来点儿简单的,借用在listbox里按下鼠标时再移动,会高亮显示选择行,并... 查看详情

div_隐藏显示

...会上移到该空间区域(好像桌子上有100块钱,现在我把它放在抽屉里藏起来,桌子上 查看详情

用js怎么判断鼠标在某一个div上的停留时间?

用js怎么判断(获取)鼠标在某一个div上的停留时间?移动到DIV上时调用函数函数里写一个setTimeOut的计时器然后将这个计时器内不断加加一个数字不就OK了参考技术A当鼠标移动到DIV上时捕捉一个时间,移开后再捕捉一个相减 查看详情

彼此相邻显示 2 个 div,而不是将一个放在新行上

】彼此相邻显示2个div,而不是将一个放在新行上【英文标题】:show2divsnexttoeachotherinsteadofpushingtheoneonanewrow【发布时间】:2022-01-1213:33:57【问题描述】:我在一个菜单中有2个div,它们在点击时被隐藏和显示。我希望它们并排显示... 查看详情

鼠标移到链接上后,HTML 超链接的颜色保持不变

】鼠标移到链接上后,HTML超链接的颜色保持不变【英文标题】:HTMLhyperlinkremainchangedcoloraftermousehasmovedoverlink【发布时间】:2011-03-1022:35:19【问题描述】:我想知道,当鼠标悬停在链接上时,链接会变成蓝色。是否有可能在鼠标... 查看详情

鼠标悬停时如何将url隐藏在超链接中

】鼠标悬停时如何将url隐藏在超链接中【英文标题】:howcanurlbehiddeninhyperlinkwhenmousehover【发布时间】:2012-04-0817:33:25【问题描述】:当鼠标悬停在超链接上时,如何隐藏URL以不显示?<ahref="url">Hyperlink</a>当鼠标悬停时,... 查看详情