hover effect after bind an image with mouse

Question

I have this code to bind an image with mouse,

$(function(){
    var $i = $('#gg');
    $( "#gg" ).click(function() {
        $(document).bind('mousemove',function(e){
            $i.css({
                left: e.pageX -42,
                top:  e.pageY -60
            });
        });
    });
});

after bind i want to hide another image on mouseover. Look at this FIDDLE

please give me any idea.

Answer 1

$(function () {
    var $i = $("#gg")
    $i.click(function () {
        $i.css('pointer-events','none');
        $(document).on('mousemove', function (e) {
            $i.css({
                left: e.pageX - 42,
                top: e.pageY - 60
            });
        });
        $('#gg1').one('mouseenter', function() {
            $(this).hide();
        });
    });
});

FIDDLE