文章来自LearnShare，转载请注明。
本文是【HUI】Tooltip(提示组件) 系列文章之一，请关注本系列的 更新。
上一篇文章中讲到了Tooltip的HTML 结构优化版本，本文中，我们添加几行样式，让Tooltip响应鼠标的hover效果。
引用 W3school CSS:hover：
:hover 伪类在鼠标移到元素上时向此元素添加特殊的样式。
W3school 的示例是对 a 元素应用的 :hover 伪类，用于指定 鼠标指向的超链接 的样式。其实所有HTML元素都可以应用该伪类，用来指定鼠标指向时的样式。
Tooltip的基本形式是：
默认状态下，Tooltip是不显示的；
当鼠标指向父元素，Tooltip显示出来；
当鼠标离开父元素，Tooltip隐藏起来。
下面，基于上一篇文章中优化过的Tooltip结构，我们来修改样式：
首先，Tooltip默认不显示：
.hui-tooltip span{
display:none;
}然后，当鼠标指向父元素，将Tooltip显示出来：
.hui-tooltip:hover span{
display:inline;
}OK，就这么简单，查看效果。
这样，Tooltip组件的基本效果就完整了。下一篇文章中，我们将丰富一下Tooltip气泡，给他添加尾巴、边框、圆角和阴影等效果。
文章来自LearnShare，转载请注明。