Jeder Weg, um einen Textbereich zu folgen, Maus zu folgen?

-2

Meine erste Website funktioniert ok, aber ich habe eine Idee, die ich nicht zu erreichen weiß. Einige Seiten verfügen über einen Videoplayer mit Schaltflächen zum Auswählen von Videos. Wenn Sie die Maus über eine Schaltfläche bewegen, wird das Navigationsmenü durch einen Popup-Textbereich ersetzt, der das Video beschreibt. Jeder Weg, um einen Textbereich zu folgen, Maus zu folgen?

Ich möchte, dass der Popup-Text ein paar Zeilen über der Schaltfläche erscheint, über der die Maus schwebt, so dass die Augen des Betrachters nicht vor und zurück gehen müssen. Ich habe nachgesehen, aber ich habe nichts gefunden, was darauf hindeutet. Das nächste, was ich gesehen habe, ist die Verwendung einer Titeleigenschaft <span>, um einen Mouseover-Tooltipp zu erstellen. Vielleicht können Sie mir in die richtige Richtung zeigen?

Quelle

2016-09-08 Bewildered

Verwendung Offset() - jQuery –

Versuchen nur eine Frage auf Stack-Überlauf zu schreiben, wenn Sie eine deutlich begegnen Problem in Ihrer Implementierung, das Sie nicht selbst beheben können - Sie werden viel mehr versuchen, dies zuerst selbst zu versuchen. (Als Ihre erste Website ist dies eine großartige Lernmöglichkeit und Sie können mit neuen Dingen experimentieren.) – Serlite

Während Sie jQuery getaggt haben, hat die zusätzliche Bibliothek jQuery UI eine eingebaute Funktion: [Tooltip] (https: // jqueryui.com/tooltip/). Außerdem gibt es eine Menge anderer Plugins, die dies bereitstellen. – empiric

Versuchen Sie folgendes:

$(document).on("mousemove",function(e){ 

    $(".moveTxt").css({top:e.pageY,left:e.pageX}); 

})

Schlusscode:

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <style> 
 
     .moveTxt { 
 
      position: relative; 
 
      background-color: yellow; 
 
      display: inline-block; 
 
      border: 1px solid red; 
 
     } 
 
    </style> 
 
</head> 
 
    
 
    <body> 
 
     
 
     <div class="moveTxt">Text</div> 
 
     
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
     <script> 
 
      
 
     $(document).on("mousemove",function(e){ 
 

 
      $(".moveTxt").css({top:e.pageY,left:e.pageX}); 
 

 
     }) 
 
     
 
     </script> 
 
    </body> 
 
</html>

Quelle

2016-09-08 17:47:33 Ehsan

Jeder Weg, um einen Textbereich zu folgen, Maus zu folgen?

Antwort

Verwandte Themen