html鼠标经过提示纯CSS实现鼠标悬停提醒的办法CSS小白第三期

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

首先创建一个大略的带链接的HTML（根据自己的须要），在链接显示的文本后面添加须要提示的内容并置于span标签中（加粗部分）

<p>

html鼠标经过提示纯CSS实现鼠标悬停提醒的办法CSS小白第三期 Bootstrap

<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添加一些样式，让它看起来更像是提示。
可以添加一些内边距边框和背景颜色等。

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--- 使工具在网页上不可见，但该工具在网页上所占的空间没有改变，普通来说便是看不见但摸得到。