html伪类鼠标悬停,实现鼠标悬停Tooltip效果的CSS3代码

Tooltip是个应用非常广泛的东西，指的是鼠标移到图片或者按钮等元素上时弹出的一个用于描述图片或者说明按钮功能的提示文本，就比如下图的这个东西。

html其实也有内置的“Tooltip”，比如下面的代码

鼠标移到图片上时，就会在图片上方弹出内容为“这是一只可爱的小猫”的文本提示框。

当然了，这个默认的“Tooltip”应用范围窄，而且样式使用操作系统默认的效果，很难跟页面融合。所以我们还是自己制作这样的Tooltip吧。

Tooltip最大的特点是鼠标移上元素时显示，鼠标移出的时候隐藏。想通过css控制这种行为，我们自然要给Tooltip做成一个元素(当然伪元素也可以，不过本教程不打算用那个)。

鼠标移到元素上显示Tooltip，最容易想到的是hover伪类。但是这里有个问题，hover伪类只能操作被鼠标悬停的那个元素，而无法操作Tooltip元素。这里就需要实现一个联动的效果，比如label的for属性，但我们这这个不是Label，所以不能用。

那么最简单的方法也就是嵌套了，用外层元素做容器，使用hover伪类派生的方法