Javascript 寻找鼠标高亮显示链接时如何显示信息警报的选项

我正在制作一个相对简单的网站，显示我的团队和我使用的链接。其中一个要求是当用户将鼠标光标放在任何链接上时显示注释信息。我知道最简单的方法就是如果没有人使用它，就不要列出链接，但是出于存档的原因，团队坚持在这个网站上发布URL。他们也可能返回链接并在其环境中再次使用它

考虑这一联系：

<a href="www.footester.com/foofootestest">Test Environment #1</a>

我希望鼠标光标悬停在链接上时显示此警报（如下所示）：

<div class="container">
  <div class="alert alert-info">
    <strong>Note: The testers are not using this link as a part of their test environment!</strong>
  </div>
</div>

注意：测试人员没有将此链接用作测试环境的一部分

---

如果有其他方法来实现这一点的建议，我很乐意听听。

给你的链接并给每个人一个

id

，这样你就可以用JavaScript来瞄准它，默认情况下也隐藏你的警报，类似这样：

<a id="testenv" href="www.footester.com/foofootestest">Test Environment #1</a>

<div id="testalert" style="display:none" class="alert alert-info">
    <!-- ... -->
</div>

var testenv = document.getElementById("testenv"),
    testalert = document.getElementById("testalert");

testenv.addEventListener("mouseover", function( event ) {
    testalert.style.display = "block";
}, false);

为了好玩，您还可以添加一个

mouseout

事件，当鼠标离开链接（不再悬停）时，警报再次消失：

以下是代码段块中的完整代码：

var testenv=document.getElementById（“testenv”），
testalert=document.getElementById（“testalert”）；
testenv.addEventListener（“鼠标悬停”，函数（事件）{
testalert.style.display=“块”；
}，假）；
testenv.addEventListener（“鼠标出”，函数（事件）{
testalert.style.display=“无”；
}，假）

注意：测试人员没有将此链接用作测试环境的一部分
这会起作用，但您必须在每个链接下方添加警报容器


a{
浮动：左；
明确：两者皆有；
填充：10px；
宽度：100%；
}
.警惕{
显示：无；
}
a:悬停+。容器。警报{
显示：块；
}

注意：测试人员没有将此链接用作测试环境的一部分
注意：测试人员没有将此链接用作测试环境的一部分
注意：测试人员没有将此链接用作测试环境的一部分
<>代码>这可能是非常基础的，但是你有没有考虑过：


我为我正在进行的一个个人项目做了类似的事情，并将插件用于这种类型的显示。使用一个小小的jQuery，将它连接到mouseover事件并让popover甚至跟随您的光标在便笺上，这相当简单

以下是一个示例！：D


$（文档）.ready（函数（）{
函数onRowMouseLeave（e）
{
$（e.target）.popover（“隐藏”）；
}
函数onRowMouseMove（e）
{
$（e.target）.popover（“show”）；
//魔术数字稍微偏离光标，防止弹出框闪烁
$（“.popover”）.css（{top:e.pageY-14，left:e.pageX+6}）。查找（“.arrow”）.css（“top”，“14px”）；
}
$（“[data toggle='popover']”）。popover({
动画：错，
容器：“主体”，
是的，
位置：“对”，
触发器：“手动”，
}).on（“mousemove”、“onRowMouseMove”）
.on（“mouseleave”、“onRowMouseLeave”）；
});

我想悬停的内容
查看事件，或者如果使用jQuery库（基本上是一个JavaScript框架），可以使用它的函数。您可以使用<代码> A~div < /Cord> CSS规则：您可能希望接受其中一个答案作为正确的答案……我之前考虑过这个方法，谢谢您提出。我唯一的问题（我希望你或其他人知道）是标题看起来太长了几分之一秒。有没有可能让标题弹出得更快，甚至更接近即时？谢谢遗憾的是，没有。没有办法使标题属性显示得更快：
testenv.addEventListener("mouseout", function( event ) {
    testalert.style.display = "none";
}, false);