Question

我有几个靠近的盒子，当任何一个盒子悬停在上面时显示一个不同的盒子，这里是一个代码片段（不完整，所以没有小提琴）：

<div id="big_square_1" class="big_square" style="display:none;"></div>
<div id="big_square_2" class="big_square" style="display:none;"></div>
<div id="big_square_3" class="big_square" style="display:none;"></div>
<div id="big_square_4" class="big_square" style="display:none;"></div>

和jQuery：

    $("#big_square_1").mouseenter(function() {
        $('#big_square_1').css("border", "1px solid #191919").css("height", "98px").css("width","98px");
        $('#hover_Box').fadeIn('fast');
    });
    $("#big_square_1").mouseleave(function() {
        $('#big_square_1').css("border", "inherit").css("height", "100px").css("width", "100px");
        $('#hover_Box').fadeOut('fast');
    });
    $("#big_square_2").mouseenter(function() {
        $('#big_square_2').css("border", "1px solid #191919").css("height", "98px").css("width","98px");
        $('#hover_Box').fadeIn('fast');
        $('#side_box_1').append('<br><br><br><p>This is ARC</p>');
    });
    $("#big_square_2").mouseleave(function() {
        $('#big_square_2').css("border", "inherit").css("height", "100px").css("width", "100px");
        $('#hover_Box').fadeOut('fast');
    });

我已经单独配置了这些事件，以便稍后我可以使用.html添加内容。然而，就目前而言，当这些盒子快速翻转时，“快速”只是不够快，而它们淡入的盒子最终会闪烁。如何修改我的mouseenter / mouseleave以防止这种眨眼？（我是.stop / .bind新手）。此外，我知道我可以使用速记进行多次CSS更改，我只是喜欢这样做，直到我解决了悬停问题。

Answer 1

尝试在fadeIn和fadeOuts之前放置.stop(true,true)。

Mouseenter / mouseleave正确绑定以避免闪烁的盒子

1 个答案: