关闭→
当前位置:趣知常识网>游戏数码>IT技术>用JS+CSS实现鼠标悬停显示提示框

用JS+CSS实现鼠标悬停显示提示框

趣知常识网 人气:2.97W

我们在浏览网页时,经常会看到有一些提示信息是在鼠标放上去后,才显示出来的。这个功能如何做的?下面我们来看下。

操作方法

(01)首先,我们写上对应的HTML,一个显示标题,和标题的提示信息。

用JS+CSS实现鼠标悬停显示提示框

(02)页面运行的初始效果如图,还比较粗糙的。

用JS+CSS实现鼠标悬停显示提示框 第2张

(03)我们为内容添加CSS样式,为tips的父容器添加样式:position: relative;tips添加样式: position: absolute;这样主要是为了让悬停的显示提示框好定位。再为提示信息添加一些美化样式,代码如图。

用JS+CSS实现鼠标悬停显示提示框 第3张

(04)接着是定义sj样式内容,这个主要是用css来显示一个三角形。

用JS+CSS实现鼠标悬停显示提示框 第4张

(05)再看下现在页面效果,显示效果已经比较好了。

用JS+CSS实现鼠标悬停显示提示框 第5张

(06)由于我们的提示框需要鼠标悬停的时候才显示出来,所以我们需要为样式添加样式:display: none; 这样初始就不显示这个提示框了。

用JS+CSS实现鼠标悬停显示提示框 第6张

(07)在添加脚本事件前,我们需要先引入Jquery脚本插件,因为JS代码里有用这个插件。

用JS+CSS实现鼠标悬停显示提示框 第7张

(08)然后添加脚本事件,我们为h2标题添加mouseover,mouseout事件,就是鼠标悬停在上面时,显示出提示框,鼠标离开时,隐藏提示框,代码如图。

用JS+CSS实现鼠标悬停显示提示框 第8张

(09)最后看下整个效果。当我们鼠标放到‘本站’这个标题上时,提示框就会显示出来了,移开就会隐藏提示框。

用JS+CSS实现鼠标悬停显示提示框 第9张
TAG标签:#JSCSS #鼠标悬停 #提示框 #