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

本文介绍了如何使用CSS2的`:hover`伪类为Tooltip添加响应鼠标悬停的效果。Tooltip在默认状态下隐藏,当鼠标悬停在父元素上时显示,离开时隐藏。示例展示了基本的Tooltip样式设置,为后续完善Tooltip的视觉效果奠定了基础。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值