Question

首先，我想说这不是一个重复的问题，因为我已经看了其他问题，似乎没有什么工作/适用于我正在做的事情。

问题是当我将鼠标悬停在目标div上时，如果我移动鼠标，效果会闪烁，如果我将鼠标悬停在div上并将鼠标放在同一个位置，它就不会闪烁。

我尝试过使用.show和.hide以及其他可以给我预期效果的功能，但我仍然会遇到闪烁的问题。

这是我使用的HTML。

<div class="four-icons">
    <div class="icon-wrapper col-md-3">
        <div class="mouse-over-1"><img src="img/bookatable-hover.png"></div>
        <img class="icons-1" src="img/book%20a%20table.jpg">
    </div>
    <div class="icon-wrapper col-md-3">
        <div class="mouse-over-2"><img src="img/menus-hover.png"></div>
        <img class="icons-2" src="img/menus.jpg">
    </div>
    <div class="icon-wrapper col-md-3">
        <div class="mouse-over-3"><img src="img/christmas-hover.png"></div>
        <img class="icons-3" src="img/christmas.jpg">
    </div>
    <div class="icon-wrapper col-md-3">
        <div class="mouse-over-4"><img src="img/contactus-hover.png"></div>
        <img class="icons-4" src="img/contact.jpg">
    </div>
</div>

这是相应的jQuery：

$(document).ready(function(){


    $("img.icons-1").mouseenter(function(){
        $("div.mouse-over-1").css("display", "block").css("position", "absolute");
    });
    $("img.icons-1").mouseleave(function(){
        $("div.mouse-over-1").css("display", "none");
    });



    $("img.icons-2").mouseover(function(){
        $("div.mouse-over-2").css("display", "block").css("position", "absolute");
    });
    $("img.icons-2").mouseout(function(){
        $("div.mouse-over-2").css("display", "none");
    });



    $("img.icons-3").mouseover(function(){
        $("div.mouse-over-3").css("display", "block").css("position", "absolute");
    });
    $("img.icons-3").mouseout(function(){
        $("div.mouse-over-3").css("display", "none");
    });



    $("img.icons-4").mouseover(function(){
        $("div.mouse-over-4").css("display", "block").css("position", "absolute");
    });
    $("img.icons-4").mouseout(function(){
        $("div.mouse-over-4").css("display", "none");
    });


});

这里是代码所在的位置：http://muhammadkasimali.co.uk/Cruise/ 以防你想复制这个问题。

另外，我确实试图创建一个JSfiddle，但无法让它工作，我几乎是一个菜鸟所以我很抱歉，如果这是一个糟糕的问题。

Answer 1

您应该在父元素上绑定mouseenter / mouseleave事件，此代码应该有效：

<强>的Javascript

$(document).ready(function(){

    $(".icon-wrapper").mouseenter(function(){
        $(this).find('div').css("display", "block").css("position", "absolute");
    });
    $(".icon-wrapper").mouseleave(function(){
        $(this).find('div').css("display", "none");
    });

});

Answer 2

在.stop(true, true)方法之前添加.css。

Docs

$(document).ready(function(){


$("img.icons-1").mouseenter(function(){
    $("div.mouse-over-1").stop(true,true).css("display", "block").css("position", "absolute");
});
$("img.icons-1").mouseleave(function(){
    $("div.mouse-over-1").stop(true,true).css("display", "none");
});



$("img.icons-2").mouseover(function(){
    $("div.mouse-over-2").stop(true,true).css("display", "block").css("position", "absolute");
});
$("img.icons-2").mouseout(function(){
    $("div.mouse-over-2").stop(true,true).css("display", "none");
});



$("img.icons-3").mouseover(function(){
    $("div.mouse-over-3").stop(true,true).css("display", "block").css("position", "absolute");
});
$("img.icons-3").mouseout(function(){
    $("div.mouse-over-3").stop(true,true).css("display", "none");
});



$("img.icons-4").mouseover(function(){
    $("div.mouse-over-4").stop(true,true).css("display", "block").css("position", "absolute");
});
$("img.icons-4").mouseout(function(){
    $("div.mouse-over-4").stop(true,true).css("display", "none");
});

jQuery mouseenter和mouseleave创建闪烁

2 个答案: