个人资料 hover 卡显示用户关注或查看个人资料

Question

我正在尝试在我的网站上构建配置文件 hover 卡，并带有按钮以关注和取消关注用户，我能够构建这个直到 hover 部分，但是 ZE0542F579DF8E8138ADE69F8F8F5310BF2Z 卡如何在移出我的缩略图卡时消失修复此问题以使 hover 卡停留在鼠标悬停并在鼠标移出时消失

插件链接

更新：我能够实现它并更新 plunker 以供参考，以便将来有人可以使用它。

Answer 1

我看到您正在使用 JS hover 事件添加/删除 HTML。 它消失的原因是因为一旦您离开缩略图，它就会告诉您的 JS 删除 hover 卡 HTML。

我建议确保您的 hover 卡是配置文件缩略图的子元素。 使用 CSS 在 hover 上显示/隐藏，而不是使用 JS 添加/删除 HTML。 这背后的想法是，如果您的 hover 卡被包裹在配置文件缩略图中，那么当您移至卡片元素时，从技术上讲，您仍将鼠标悬停在缩略图元素上。

Answer 2

您的卡片消失了，因为(mouseout)="hideprofile(d)"附加到圆形图像。 一旦你的鼠标离开图像，它就会隐藏卡片。 最好的解决方案是不在鼠标悬停时隐藏卡片，而是通过单击或其他条件。

这是一个如何完成的工作示例。 现在它只在您单击卡片时隐藏卡片。 为了防止多张卡片彼此相邻产生，我将this.data.map(item => { item.showpop = false })添加到您的 showprofile() 方法中以隐藏所有其他卡片。

https://plnkr.co/edit/MBROv0KeK4BNv0xv