Question

HTML：

<div id="container">
    <div class="section one"></div>
        <div class="inner"></div>
    <div class="section two"></div>
        <div class="inner"></div>
    <div class="section three"></div>
        <div class="inner"></div>
    <div class="section four"></div>
        <div class="inner"></div>
</div>

解释

在悬停每个div（部分）时，它应隐藏，并显示下一个div（内部）。在mouseleave上它显示为旧。为此，我使用了moseenter和mouseleave事件。

问题

在mouseenter上，div闪烁（同时发生两个事件）。

Jquery的

$(document).ready(function () {
    $(".inner").hide();
    $(".section").mouseenter(function () {
        $(this).hide();
        $(this).next(".inner").show();
    });
    $(".section").mouseleave(function () {
        $(this).show();
        $(this).next(".inner").hide();
    });
});

请查看下面给出的小提琴，了解更多详情

DEMO

Answer 1

这是因为.hide也在触发mouse out函数..

以下是您更新的小提琴： http://jsfiddle.net/hdehzec0/12/

考虑HTML的这种结构：

<div id="container">
    <div class="section one"><div class="inner"></div></div>

    <div class="section two"><div class="inner"></div></div>

    <div class="section three"><div class="inner"></div></div>

    <div class="section four"><div class="inner"></div></div>

</div>

和你的JQuery：

$(document).ready(function () {
    $(".inner").hide();
    $(".section").hover(
     function () {
        $(this).find(".inner").show();
     }, function() {
        $(this).find(".inner").hide();
    });
});

Answer 2

当隐藏“.section”时，您的鼠标会离开.section。这就是它眨眼的原因。当您显示.hidden时，您需要在离开.hidden时触发事件这可以解决您的问题：（ http://jsfiddle.net/hdehzec0/7/ ）：

$(document).ready(function () {
    $(".inner").hide();
    $(".section").mouseenter(function () {
        $(this).next(".inner").show();
        $(this).hide();
    });
    $(".inner").mouseleave(function () {
        $(this).hide();
        $(".section").show();
    });
});

Answer 3

小提琴：http://jsfiddle.net/hdehzec0/16/

当你输入.section时它会消失，因此mouseleave函数会被触发。因为你的鼠标是

，所以不要在mouseleave上使用.section而使用.inner

$(document).ready(function () {
        $(".inner").hide();
        $(".section").mouseenter(function () {
            $(this).hide();
            $(this).next(".inner").show();
        });
        $(".inner").mouseleave(function () {
            $(this).hide();
            $(this).prev(".section").show();
        }); 

});

使用jquery将div悬停在div上

3 个答案: