Auf der Suche nach Optionen, wie Info-Warnung angezeigt wird, wenn die Maus Link markiert

Question

Ich mache eine relativ einfache Website, die Links zeigt, die mein Team und ich verwenden. Eine der Anforderungen besteht darin, Hinweisinformationen anzuzeigen, wenn ein Benutzer den Mauszeiger über einen der Links hält. Ich verstehe, dass die einfachste Methode ist einfach nicht den Link auflisten, wenn niemand es verwendet, aber das Team besteht darauf, die URL auf dieser Website aus Archivgründen zu veröffentlichen. Sie können auch zu dem Link zurückkehren und ihn in ihrer Umgebung erneut verwenden.

Betrachten Sie diesen Link:

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

Ich möchte diese Warnung (unten) angezeigt wird, wenn der Mauszeiger über den Link schwebt:

<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> 

Wenn es irgendwelche anderen Vorschläge auf andere Methoden, um dies zu erreichen, würde ich gerne hören.

Answer 1

Geben Sie Ihren Link und alarmieren jeweils eine id, so dass Sie es mit JavaScript ausrichten können, auch für Ihre Warnung standardmäßig so etwas wie dieses verstecken:

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

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

Dann JavaScript verwenden, um die mouseover Ereignis ausgelöst, wenn der Link ist schwebte wie folgt aus:

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

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

Just for fun könnten Sie auch ein mouseout Ereignis machen die Warnung wieder verschwinden hinzufügen, wenn die Maus den Link (nicht schwebte mehr) aussteigt:

0 Hier

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

ist der vollständige Code in einem Code-Schnipsel Block:

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>

Hier können Sie mit diesem Code auf bootply spielen (die Bootstrap-Test Sandbox): http://www.bootply.com/TfrhmIbqq8

Answer 2

Das würde funktionieren, aber Sie müssen den Alarmcontainer unter jedem Link

hinzufügen

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

Es kann sehr einfach sein, aber fanden Sie versuchen:

<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>

Der Vorteil ist, dass Sie nicht sein werden alarmiert auf irgendeinen Link, den du schwebst, erhält aber eine Notiz.

Answer 4

Ich habe etwas Ähnliches für ein persönliches Projekt, an dem ich arbeite, gemacht und das Bootstrap Popover Plugin für diese Art von Anzeige verwendet. Mit ein wenig jQuery ist es ziemlich einfach, es an das MouseOver-Ereignis anzuschließen und das Popover sogar Ihrem Cursor herum auf der Anmerkung zu folgen.

Hier ist ein jsFiddle als Beispiel!: 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>