【HUI】Tooltip(提示组件)——3.Tooltip in CSS2(demo完整效果)
来源:互联网 发布:沙驰皮鞋 知乎 编辑:程序博客网 时间:2024/09/21 09:29
文章来自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,转载请注明。
- 【HUI】Tooltip(提示组件)——3.Tooltip in CSS2(demo完整效果)
- 【HUI】Tooltip(提示组件)——1.Tooltip in CSS2[demo0]
- 【HUI】Tooltip(提示组件)——2.Tooltip in CSS2(优化方案)
- Tooltip(提示框)组件
- 【jQuery】工具提示插件——tooltip
- jQuery hover 做tooltip工具提示效果
- QML的Label实现Tooltip提示效果
- CSS—Tooltip
- ToolTip
- tooltip
- Tooltip
- tooltip
- tooltip
- asarea——AS3 ToolTip鼠标提示类
- 【JQuery UI】工具提示插件——tooltip
- Bootstrap基础19——工具提示框tooltip
- echarts 解读——提示框(tooltip)配置
- 自定义ToolTip组件
- hbase的内容查询
- poj 1631 Bridging signals (DP_最長遞增子序列nlogn)
- Telnet SSH1 SSH2 简介
- ssh显示中文乱码及消除高亮显示
- 大数据分析(Big Data OLAP)引擎Dremel, Tenzing 以及Impala
- 【HUI】Tooltip(提示组件)——3.Tooltip in CSS2(demo完整效果)
- Android调试、debug技巧总结
- ubuntu12 初始化包信息时遇到无法解决的问题
- zookeeper
- centos虚拟机下联网
- 学习 Box2D 个人笔记(一)b2World
- 【shell】sed的-e选项
- Cocos2d-x 2.0变速动画深入分析
- VC2010工程中加入SplashScreen及原理释解