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

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

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

鼠标悬停提示是指当鼠标悬停在某一元素上时浏览器弹出的黄色小文本框，一般开发者大多会结合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小白第三期)

相关推荐

HTML标签速查手册?别死记硬背了，带你从原理上掌握它!

旧手机新玩法，MacroDeck进阶指南

推荐36种免费React模板和主题「干货」

用node.js实现一个网页爬虫（nodejs爬虫模拟浏览器）

免费领取→可编辑危废标签模板首发!

业余无线电UV段几种常见天线（uv段最强天线）

今年最常见的前端面试题，你会做几道?

GitHub和码云上，7个h5页面制作工具推荐

BarTender10.1条码软件如何制作模板标签

顶级Javaer，常用的 14 个类库