寻找关于如何在鼠标突出显示链接时显示信息提醒的选项

Question

我正在制作一个相对简单的网站，显示我的团队和我使用的链接。其中一个要求是当用户将鼠标光标放在任何链接上时显示注释信息。我明白，最简单的方法就是不列出链接，如果没有人使用它，但团队坚持在本网站上发布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> 

如果有其他任何其他建议方法来完成这个，我很乐意听到。

Answer 1

给你的链接，并提醒每一个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> 

然后使用JavaScript当链路是火mouseover事件徘徊是这样的：

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

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

只是为了好玩，你还可以添加一个mouseout事件做出警报再次消失，当鼠标下车的链接（不徘徊了）：

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

下面的代码片段块中的全部代码：

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

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<a id="testenv" href="www.footester.com/foofootestest">Test Environment #1</a> 
 

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

在这里，您可以与bootply代码（引导测试沙箱）玩：http://www.bootply.com/TfrhmIbqq8

Answer 2

这将工作，但您必须在每个链接下面添加警报容器

a { 
 
    float: left; 
 
    clear: both; 
 
    padding: 10px; 
 
    width: 100%; 
 
} 
 
.alert { 
 
    display: none; 
 
} 
 
a:hover + .container .alert { 
 
    display: block; 
 
}

<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> 
 
<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> 
 
<a href="www.footester.com/foofootestest">This does not get Alert</a> 
 
<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>

Answer 3

这可能是非常基本的，但你考虑尝试：

<a href="www.footester.com/foofootestest" title="Note: The testers are not using this link as a part of their test environment!">Test Environment #1</a>

的好处是，你会不会惊动在您悬停的任何链接上，但会收到一张纸条。

Answer 4

我为我正在进行的个人项目做了类似的事情，并且使用Bootstrap Popover插件进行这种类型的显示。使用一个小小的jQuery，将它连接到mouseover事件并让popover甚至可以跟随你的光标在记事本上很简单。

这里是一个jsFiddle作为例子！：d

$(document).ready(function() { 
 
    function onRowMouseLeave(e) 
 
    { 
 
    $(e.target).popover("hide"); 
 
    } 
 

 
    function onRowMouseMove(e) 
 
    { 
 
      $(e.target).popover("show"); 
 
      // Magic numbers to offset from cursor slightly and prevent popover from flashing as much 
 
      $(".popover").css({ top: e.pageY - 14, left: e.pageX + 6 }).find(".arrow").css("top", "14px"); 
 
    } 
 
    
 
    
 
\t $("[data-toggle='popover']").popover({ 
 
     \t animation: false, 
 
     container: "body", 
 
     html: true, 
 
     placement: "right", 
 
     trigger: "manual", 
 
     }).on("mousemove", "", onRowMouseMove) 
 
    \t .on("mouseleave", "", onRowMouseLeave); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <a href="#" data-toggle="popover" data-content="<div class='alert alert-danger'>Here is the note to display</div>"> 
 
    Content I want to hover 
 
    </div> 
 
</div>