Question

我正在一个网站上工作，我想在菜单栏中的主题（射击场）范围内做一些额外的工作。当用户将鼠标悬停在元素上时，光标旁边会出现一个小十字准线，而在 li 元素中，图像将跟随光标。

然而，有时候它似乎有些偏差，如果你继续在列表元素上移动鼠标，有时阴影y悬停效果（这是一个css：悬停的东西）会卡在最后一个元素上。你可以看到它here。（只需在菜单元素上移动鼠标即可。）

起初我认为这是一个CSS问题，但在摆弄css和js之后，它似乎是一个javascript问题。如果我注释掉“偏移”线，它的工作正常。后来我尝试将jquery函数切换到本机javascript，但是当偏移行被注释掉时，bug（？）仍然会发生。

我发现设置偏移量可能很慢。这会导致我的问题吗？

我怎么能解决这个问题？

感谢您的帮助/建议！

这是我的jQuery代码：

$("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});
});

这是本机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";
    });
}

Answer 1

我建议您在代码中只使用一个img.crosshair ..首先尝试重新构建这样的html :(从每个li中删除多余的img）

<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>

然后尝试使用下面这样的jquery，将鼠标悬停在你需要的位置，并将其覆盖..

$(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");
    });

});

正在发生的事情是，当你在浏览器中传播鼠标悬停事件时，悬停在每个li上时，有时两个图像会移动一个li和一个图像，这就是毛刺发生的地方

，欢呼，祝你好运

鼠标移动偏移混乱悬停效果

1 个答案: