当前位置：网站首页 > 技术文章 > 正文

纯CSS实现鼠标悬停提示的方法(CSS小白第三期)

zhezhongyun 2025-04-24 10:35 33 浏览

鼠标悬停提示是指当鼠标悬停在某一元素上时浏览器弹出的黄色小文本框，一般开发者大多会结合Javascript创建各式各样的自定义提示，其实通过CSS定位也可以实现，首先我们看一下效果图：

接下来我们详细介绍它的实现方法：

首先创建一个简单的带链接的HTML（根据自己的需要），在链接显示的文本后面添加需要提示的内容并置于span标签中（加粗部分）
<p>
<a href="www.laosiji.com" style="text-decoration:none">www.你懂的.com<span>(未满18周岁请勿点击)</span></a> is a Horror Movies Website.
</p>
接下来是关键部分，先将链接的position属性设置为relative,因为<a>是<span>的父级元素，这样接下来才可以让<span>中的提示内容根据<a>中的链接文本进行绝对定位。<span>中的提示内容我们不希望它一开始就显示出来，所以要将它的display属性设置为none.
a{position:relative;}
a span{display:none;}
当鼠标悬停在链接上时我们希望显示出span中的提示内容，这时就需要将span的display属性设置为block，为了让其出现在链接的右下方，需要将span的position属性设置为absolute，并设置一定的距离（顶部1em,左边2em).
a{position:relative;}
a span{display:none;}
a:hover span{display:block;
position:absolute;top:1em;left:2em;}
前两步基已经完成了本次案例的主体，剩下的就是给span添加一些样式，让它看起来更像是提示。可以添加一些内边距边框和背景颜色等。
<style type="text/css">
a{position:relative;}
a span{display:none;}
a:hover span{display:block;
position:absolute;top:1em;left:2em;
width:160px;
padding:0.2em 0.6em;
border:1px solid #996633;
background-color:#FFFF66;
color:red;}
</style>
PS:最后科普一下display:none与visible:hidden的区别
display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。
visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。

HTML style type 属性

上一篇：斗鱼关注人数爬取 ── 字体反爬的攻与防
下一篇：html input type=file change事件异常处理办法

纯CSS实现鼠标悬停提示的方法(CSS小白第三期)

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

接口测试遇到500报错?别慌，你的头部可能有点问题

Web前端需要学什么?Web前端开发需要学习哪些?

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

关于HTML5被简称做H5，你怎么看?（html5缩写）

现在页面实时聊天都使用Websocket技术实现吗?