Q:

Mousemove offset messes up hover effect

I'm working on a website, and I wanted to do a little extra in the context of the subject (a shooting range) in the menubar.  When a user hovers onto the element, a little crosshair would appear next to the cursor and the image would follow the cursor while in the li element. 
However it seems a little off sometimes, as in if you keep moving a mouse on the list elements, sometimes the shadow-y hover effect (which is a css :hover thing) gets stuck on the last element.  You can see it here. ( Just move the mouse on the menu elements.) 
At first I thought it's a css problem, but after fiddling with both css and js, it seems to be a javascript problem.  If I comment out the "offset" lines, it's working fine.  Later I have tried switching out the jquery function to native javascript, but the bug(?)  still happens when the offset lines are commented out. 
I've found that setting the offset can be slow.  Would that cause my problem? 
How could I solve this?  
Thank you for your help/advice! 
This is my jQuery code:
$("nav li").mousemove(function(e) {     
    var $img = $(this).find("img.crosshair");       
    $img.css("display", "inline-block");
    $img.offset({left:e.pageX-10,top:e.pageY-10});
});

And this is the native javascript:
var menu = document.querySelectorAll("nav li");

for (var i = 0; i < menu.length; i++) {

    var elem = menu[i];

    elem.addEventListener("mousemove", function(e) {

        var img = this.querySelector("img.crosshair");
        img.style.display = "inline-block";

        img.style.left = (parseInt(e.pageX, 10) - 10) + "px";
        img.style.top = (parseInt(e.pageY, 10) - 10) + "px";
    });
}

A:

I'd suggest to use only one img.crosshair in your code.. first try to reconstuct your html something like this: (remove redundant img's from each li)
<section class="header">
    <img class="crosshair" src="images/xhair.png">
    <nav>
        <ul>
            <li><img class="bullet_hole" src="images/bullet_hole.png">A lőtér</li>
            <li><img class="bullet_hole" src="images/bullet_hole.png">Fegyverek</li>
            <li><img class="bullet_hole" src="images/bullet_hole.png">Szolgáltatásaink</li>
        </ul>
    </nav>

    <div class="logo">
        <img src="images/logo.png"></div>
    <nav>
        <ul>
            <li><img class="bullet_hole" src="images/bullet_hole.png">Egyesület</li>
            <li><img class="bullet_hole" src="images/bullet_hole.png">Galéria</li>
            <li><img class="bullet_hole" src="images/bullet_hole.png">Információk</li>
        </ul>
    </nav>
</section>

then try to use jquery like this one below ,, fix the position of image on hover to your needs and that should cover it..
$(document).ready(function() {

    $("nav li").click(function(e) {     

    var $img = $(this).find("img.bullet_hole");

        $img.css("display", "inline-block");
        $img.offset({left:e.pageX-20,top:e.pageY-10});
        setTimeout( function(){
            $img.css("display", "none");
        },4000);

    });

    $("nav li").mousemove(function(e) {     
        var $img = $(this).closest('.header').find("img.crosshair");

        $img.css("display", "inline-block");
        $img.offset({left:e.pageX-10,top:e.pageY-10});
    });

    $("nav li").mouseout(function(e) {      
        var $img = $(this).closest('.header').find("img.crosshair");
        $img.css("display", "none");
    });

});

the thing that was happening is that hover over each li moved sometimes TWO images when you hovered over one li and one before when mouseover event propagated in browser,, that's where glitch happend
hth, cheers and good luck

