尋找關於如何在鼠標突出顯示鏈接時顯示信息提醒的選項

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>