基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)

前端之家收集整理的这篇文章主要介绍了基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、应用场景

鼠标hover弹出div,并且鼠标离开后不能马上隐藏,因为这个div上还有功能入口。比如:

鼠标经过好友列表中的好友头像时显示资料卡的效果如下所示:

hover时显示二维码

二、实现

用如下这样一个简单的效果:鼠标hover到A上显示B来模拟

有2种实现方式,推荐第二种,第一种有弊端下面会说。

1、方法

原理:把触发元素A和要显示元素B放于同一个父级元素内,鼠标经过父级元素时触发显示B。这样鼠标移动到B时仍然 处于该父级元素内,则div不会隐藏。

代码

hover A show B

猜你在找的JavaScript相关文章