[JQuery] kleine Infobox

chuvak

Erfahrenes Mitglied
Ich habe mit JQuery eine kleine Infobox erstellt, die neben der Maus erscheint, wenn man mit der Maus auf eine kleine Grafik fährt und verschwindet, wenn die Maus wieder raus ist.

Das ist der Code:

HTML:
<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <style>
      .box
      {
        position: absolute;
        width: 200px;
        height: 100px;
        background-color: #00f0f0;
        display: none;
      }
    </style>
  </head>
  <body>
    <img src="http://images.wikia.com/fable/images/5/54/Information.png" id="click" height="30" width="30" />
    <div class="box">Ganz viel interessanter und nützlicher Inhalt!</div>

    <script>
      $("#click").mouseenter(function () {
        $('.box').fadeIn();
      });
      
      $("#click").mouseleave(function () {
        $('.box').fadeOut();
      });

      $(document).mousemove(function(e){
        $(".box").offset({ 
          top: e.pageY+10, 
          left: e.pageX+10 });
      }); 
    </script>
  </body>
</html>

Alles klappt auch, allerdings wenn ich mit der Maus mehrmals hin und her fahre, fängt die Box manchmal einige Mal an zu "blinken".
Weiß jemand, was ich falsch gemacht habe?

Danke!
 

Neue Beiträge

Zurück