Kontinuierliche Beschreibung über mousemove Ereignis durch jquery

Ich möchte meine eigene Beschreibung über 'mousemove' -Ereignis zeigen, die sich mit meinem Mauszeiger bewegen wird, wenn ich meine Maus über ein Bild bewege.Kontinuierliche Beschreibung über mousemove Ereignis durch jquery

Aber es funktioniert nicht

Unten ist die html code

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title> 
     </title> 
     <meta charset="utf-8" /> 
     <link rel="stylesheet" type="text/css" href="css/custom.css" /> 
    </head> 
    <body> 
     <div> 
      <img src="images/wolwerine.jpg" alt="Wolverine" hovermytext="She is doubting my capabilities." class="wolverineClass" id="wolverineId" /> 
     </div> 
     <div class="wolverineHoverText"> 
     </div>  
    <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script> 
    <script type="text/javascript" src="js/custom.js" ></script> 
    </body> 
</html>

Im Folgenden wird der custom.css Code

.wolverineHoverText{ 
    height: 40px; 
    width: 300px; 
    position: absolute; 
    padding: 40px 80px; 
    border: 1px solid #106c90; 
    background: #da8808; 
    display: none; 
    color: #ffffff; 
    font-size: 20px; 
    top:20px; 
    left:20px; 
} 
img{ 
    height: 600px; 
    width: 900px; 
    opacity: 0.5; 
}

Im Folgenden wird der custom.js Code

$(document).ready(function(){ 
    $('.wolverineClass').mousemove(function(y){ 
     var x = $(this).attr('hovermytext'); 
     $('#wolverineHoverText').text(x).show(); 
     $('#wolverineHoverText').css('top',y.clientY+10).css('left',y.clientX+10); 
    }).mouseout(function(){ 
      $('#wolverineHoverText').hide(); 
     }); 
});

Hier ist ein Link zu diesem https://www.youtube.com/watch?v=_GrWaN05-Vs&index=51&list=PL6B08BAA57B5C7810

Ich bin ein Anfänger in Jquery.

Bitte kommentieren Sie unten für jede Frage.

Quelle

2016-11-26 R K

was genau nicht funktioniert? Sie müssen mehr Informationen bereitstellen und vorzugsweise ein tatsächliches Beispiel, entweder mit jsfiddle oder Schnipsel auf dieser Seite. Wir machen es nicht für Sie, erstellen ein funktionierendes Beispiel. – junkfoodjunkie

Gave Link dafür. –

Du machst Witze, oder? – junkfoodjunkie

Hier ist eine funktionierende Lösung. Ich hoffe es hilft!

$(document).ready(function(){ 
 
    $('.wolverineClass').mousemove(function(y){ 
 
     var x = $(this).attr('hovermytext'); 
 
     $('#wolverineHoverText').text(x); 
 
     $('#wolverineHoverText').css('top',y.clientY+10).css('left',y.clientX+10).show(); 
 
    }).mouseout(function(){ 
 
      $('#wolverineHoverText').hide(); 
 
     }); 
 
});

.wolverineHoverText{ 
 
    height: 40px; 
 
    width: 300px; 
 
    position: absolute; 
 
    padding: 40px 80px; 
 
    border: 1px solid #106c90; 
 
    background: #da8808; 
 
    display: none; 
 
    color: #ffffff; 
 
    font-size: 20px; 
 
    top:20px; 
 
    left:20px; 
 
} 
 
img{ 
 
    height: 150px; 
 
    width: 400px; 
 
    opacity: 0.5; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    
 
<div> 
 
    <img src="images/wolwerine.jpg" alt="Wolverine" hovermytext="She is doubting my capabilities." class="wolverineClass" id="wolverineId" /> 
 
</div> 
 
<div id="wolverineHoverText" style="display:none"></div>

Quelle

2016-11-26 21:11:01 HenryDev

Ich denke eigentlich sollte es '.wolverineHoverText' anstelle von' # wolverineHoverText' sein. –

Kontinuierliche Beschreibung über mousemove Ereignis durch jquery

Antwort

Verwandte Themen