当前位置：网站首页 > IT知识 > 正文

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

liuian 2025-01-11 15:10 62 浏览

鼠标悬停提示是指当鼠标悬停在某一元素上时浏览器弹出的黄色小文本框，一般开发者大多会结合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--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。