我想创建一个与 Facebook 自己的悬停卡类似的功能,您将鼠标悬停在某个句子上,它会在包含一些信息的文本正上方弹出一个小窗口。
我想知道是否有人可以为我指明正确的方向,以创建类似的东西。
Facebook 悬浮卡:
最佳答案
一种解决方案是按原样创建这些卡片(如果它们是静态的)。只需在第一步中让它们可见即可,设计它们。
第二步是对所有这些设置display:none
。
稍后,如果您将鼠标悬停在某些文本上,则调用 JS 函数将 CSS 更改为 display:block;
如果您不需要动态数据或内容,这只是最简单的解决方案。从那里,您可以开始考虑使其更高级。
- Style the cards as they would be visible all the time
- Hide them with display:none;
- Call a JavaScript function when you hover over text/links and change the CSS to display:block
关于javascript - 创建 "Hovercards",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26238550/