javascript - 创建 "Hovercards"

标签 javascript onmouseover

我想创建一个与 Facebook 自己的悬停卡类似的功能,您将鼠标悬停在某个句子上,它会在包含一些信息的文本正上方弹出一个小窗口。

我想知道是否有人可以为我指明正确的方向,以创建类似的东西。

Facebook 悬浮卡:

Facebook Hovercard

最佳答案

一种解决方案是按原样创建这些卡片(如果它们是静态的)。只需在第一步中让它们可见即可,设计它们。

第二步是对所有这些设置display:none

稍后,如果您将鼠标悬停在某些文本上,则调用 JS 函数将 CSS 更改为 display:block;

如果您不需要动态数据或内容,这只是最简单的解决方案。从那里,您可以开始考虑使其更高级。

  1. Style the cards as they would be visible all the time
  2. Hide them with display:none;
  3. 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/

相关文章:

javascript - 在 Visual Studio Code 集成终端中使用 node.js 打开 JavaScript 代码

javascript - iOS6 Safari全屏检测

javascript - 如何更改散点图中点的形状?

javascript - 功能单击不适用于右键单击 li 元素

javascript - 鼠标悬停显示div

javascript - 将 JSON 对象转换为另一个对象 - 格式化

Javascript:网站上描述框的 onmouseover 功能

javascript - 使用分类 ("active"鼠标悬停时 D3 颜色变化,真)

javascript - 使用 .attr 更改 onMouseOver

C++ Builder、TShapes、如何更改颜色 OnMouseEnter