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

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

操作方法

  • 01

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

  • 02

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

  • 03

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

  • 04

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

  • 05

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

  • 06

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

  • 07

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

  • 08

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

  • 09

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

(0)

相关推荐

  • html网页怎么显示对话框、确认框、提示框

    上一篇中,我讲解了怎么在html网页中获得点击的坐标值及相对屏幕的坐标值.在这篇里,我来讲下怎么让网页显示对话框.确认框以及提示框. 操作方法 01 打开文本编辑器或记事本程序,输入<html& ...

  • 爱奇艺怎么设置删除本地视频步弹出提示框?

    爱奇艺怎么设置删除本地视频步弹出提示框?

  • 极点五笔输入法的提示框消失解决方法

    提示框的作用可以一眼就让你知道输入的字符是否正确,重码里还可以让你正确选择词组,如果消失了会非常的麻烦和不习惯! 操作方法 01 中英转换输入法,然后再换到极点五笔输入法,看是否正常显示.不能正常显示 ...

  • QQ影音鼠标悬停进度条显示预览动画功能介绍

    鼠标悬停进度条显示预览动画这个功能很多视频网站都提供了此功能,但是播放器却很少有提供这个功能的。QQ影音3.0版本为大家提供了鼠标悬停进度条显示预览动画的功能,在不拖动进度条的情况下即可完成影片预览。 ...

  • word2010中怎么设置鼠标指向按钮后显示提示?

    在word2010中,当鼠标指向功能按钮后稍停留后可以显示功能提示说明.这里介绍如何设置显示提示的方法,以供参考. 1.点击菜单栏的“文件”. 2.点击文件菜单中的“选项”. 3.点击选项界面的“常规 ...

  • Excel2007版本中怎么设置单元格鼠标悬停时显示批注

    今天小编分享的是Excel2007版本中怎么设置单元格鼠标悬停时显示批注.具体如下:1. 点击打开一个excel工作表,鼠标放在有标示的单元格上,不会显示批注内容:我们右击一个单元格,如果有" ...

  • 在QQ影音中怎么设置鼠标悬停时进度条上显示预览窗口

    我们在使用QQ影音的时候,有一个功能:鼠标悬停时进度条上显示预览窗口,当我们把鼠标在播放进度条上移动,就会显示未播放或已播放的视频窗口,想要开启,该怎么操作呢?今天就跟大家介绍一下在QQ影音中怎么设置 ...

  • 怎么设置电脑QQ影音鼠标悬停进度条上显示预览动画

    现在有很多人在电脑上使用QQ影音看视频,有些用户想知道怎么设置软件鼠标悬停进度条上显示预览动画,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步先点击左下角[开始]图标,接着根据下 ...

  • Win8.1触摸屏如何实现鼠标悬停的方法

    大家都知道win8.1电脑中有个鼠标悬停的功能,我们只需要把鼠标停在一个位置上,我们就可以看到一些预览图等等,比如说我们把鼠标悬停在一个文件夹上,我们就会看到文件中的内容,悬停在选项卡上就会看到选项中 ...