【HUI】Tooltip(提示组件)——3.Tooltip in CSS2(demo完整效果)

文章来自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，转载请注明。