CSS中的自定义悬停弹出窗口[关闭]

【问题标题】：Custom hover popup in HTML/JS/CSS [closed]HTML / JS / CSS中的自定义悬停弹出窗口[关闭]
【发布时间】：2020-12-12 04:23:04
【问题描述】：

如何在元素悬停时获得如下图所示的弹出窗口？我不确定我应该在这里添加什么，除了我最好不想使用除 jquery 之外的任何其他库。如果您需要任何代码 sn-ps 或更多信息，请告诉我！

【问题讨论】：

@epascarello 我能找到的唯一类型的工具提示是基本的黑色箭头，可能包含一个句子左右
这实际上很容易做到。创建一个 div 并设置宽度和高度。将显示设置为隐藏。然后在悬停时设置显示以阻止
@DCR 是的，我现在正在尝试这样做！如果我有任何问题，我会告诉你的，谢谢！
看起来这样行不通

标签： javascript html css popup hover

【解决方案1】：

假设您在页面上将上述元素作为 div 使用，ID 为“cursor”。您可以将 CSS 中的显示值设置为“隐藏”，这样一开始它不会显示。当您将鼠标悬停在另一个元素上时，您可以触发函数来显示或隐藏该元素：

<div id='hover-element' onmouseover='onMouseOver()' onmouseout='onMouseOut()'></div>
<div id=cursor'</div>

然后在这些函数内部：

function onMouseOver(element){
  document.getElementById('cursor').style.display = 'block';
}

function onMouseOut(element) {
  document.getElementById('cursor').style.display = 'none';
}

试试看:)

【讨论】：