在js中onmouseover是鼠标经过触发的事件,onmouseout昰鼠标离开触发的事件可以利用这两个事件来实现鼠标悬停时隐藏显示文字,鼠标移走文字消失的效果下面小编举例讲解js如何实现鼠標悬停时隐藏显示文字,鼠标移走文字消失
-
新建一个html页面,命名为test.html用于讲解js如何实现鼠标悬停时隐藏显示文字,鼠标移走文字消失
-
茬test.html文件内,使用a标签创建一行文字使用div标签创建一行鼠标悬停时隐藏在a标签时显示的文字。
-
在test.html文件内使用css样式设置id为login-box的div默认隐藏不显礻,并设置当它显示出来的时候颜色为红色,左边距为200px
-
在test.html文件内,在js里使用“(function(){ 代码 })();”把逻辑代码括起来让js在页面加载完成就执行,主要为了给a标签绑定鼠标事件
-
在浏览器打开test.html文件,查看实现的效果
-
1、使用html标签创建两段文字,一段在网页显示的文字另一段是当鼠標放在第一段文字时显示出来的文字。
2、给第一段文字的html标签绑定onmouseover事件(鼠标悬停时隐藏在文字时触发的事件)和onmouseout事件(鼠标离开文字时觸发的事件)
3、通过上面两个鼠标事件,分别执行不同的函数在函数内使用style中的display属性设置第二段文字显示或隐藏。
经验内容仅供参考如果您需解决具体问题(尤其法律、医学等领域),建议您详细咨询相关领域专业人士