JS Mouse

by Nirav Mehta

HTML

<a id="trigger">trigger</a>
<br />
<div id="pop-up">pop-up</div>

<br />
<a id="secondTrigger">secondTrigger</a>
<br />
<div id="secondPop-up">secondPop-up</div>

JavaScript

$(document).ready(function(){
        var moveLeft = 20;
        var moveDown = 10;

        $('a#trigger').hover(function(e) {
        $('div#pop-up').show();
     }, function() {
    $('div#pop-up').hide();
    });

    $('a#trigger').mousemove(function(e) {
      $("div#pop-up").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
    }); 

    $('div#pop-up').hide();
    $('div#secondPop-up').hide();
    });

    $(document).ready(function () {
        var moveLeft = 20;
        var moveDown = 10;

    $('a#secondTrigger').hover(function (e) {

        $('div#secondPop-up').show();
    }, function () {
        $('div#secondPop-up').hide();
    });

    $('a#secondTrigger').mousemove(function (e) {
        $("div#secondPop-up").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
    });

});