纯CSS实现鼠标悬停提醒的方法（CSS小白第三期）

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

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

1. 首先创立一个简单的带链接的HTML（根据自己的需要），在链接显示的文本后面增加需要提醒的内容并置于span标签中（加粗部分）

   www.你懂的.com(未满18周岁请勿点击) is a Horror Movies Website.

2. 接下来是关键部分，先将链接的position属性设置为relative,由于是的父级元素，这样接下来才可以让中的提醒内容根据中的链接文本进行绝对定位。中的提醒内容我们不希望它一开始就显示出来，所以要将它的display属性设置为none.

   a{position:relative;}

   a span{display:none;}

3. 当鼠标悬停在链接上时我们希望显示出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;}

4. 前两步基已经完成了本次案例的主体，剩下的就是给span增加少量样式，让它看起来更像是提醒。可以增加少量内边距 边框和背景颜色等。

   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;}

   PS:最后科普一下display:none与visible:hidden的区别

   display:none —不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，浅显来说就是看不见也摸不到。

   visible:hidden— 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，浅显来说就是看不见但摸得到。