鼠标悬停时显示图标(或内容)

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (248)

在Twitter中,当您将鼠标悬停在消息上时,右侧会出现一个星形和一个回复图标。

同样,在Facebook上将鼠标悬停在更新时,右侧会显示一个小“隐藏”图标,同时提供一些上下文菜单。

我希望在我的拖放句柄项目中有类似的方法。我能决定的是实现这一目标最有效的方法。

是不是每次我将鼠标悬停在带有id的div上时,我只是用.append()或类似的方式注入html?或者我是否显示/隐藏已存在的html ..还是有更好的方法?

提问于
用户回答回答于

如果你想显示漂亮的工具提示 - 工具提示插件,有一种更好的方法

您可以随时将内容附加到DOM,然后在鼠标悬停时删除,这确实有效。我认为这取决于你计划展示的是什么,如果它是图像,那么我会想要在页面加载时隐藏它们然后在悬停时显示但是如果它只是一块文本那么我可能会被诱惑添加到DOM然后在悬停时删除。

要考虑的另一个方面是优雅降级 - 如果JavaScript被禁用或没有,您是否希望某些/类似功能可用?

如果您使用Firefox的Firebug插件检查Facebook ,您可以看到隐藏 div在页面加载时存在,但是通过CSS类隐藏和激活。

用户回答回答于

最快的解决方案是使用按钮/拖动手柄设置一个隐藏块,每当你将鼠标悬停在你的元素上时,你.show()就可以相应地对它进行定位(使用css)

.append()每次鼠标悬停和移除HTML代码肯定是可能的,但肯定会有一些性能损失。

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励