使用jquery对div的悬停效果

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>

请查看下面提供的小提琴以了解更多详细信息

---

之所以发生这种情况，是因为

。hide

还启动了

鼠标退出功能

这是您最新的小提琴：

考虑HTML的以下结构：

由于“.section”被隐藏，您的鼠标将离开“.section”。这就是它闪烁的原因。
当您显示
.hidden
时，您需要在退出
.hidden
时触发事件
以下是一些可能解决您的问题的方法：
（）：

小提琴：

当您进入.section时，它会消失，因此会触发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的
hide（）
方法将元素的CSS
display
属性设置为“无”。当这种情况发生时，元素将被有效地从页面中删除，这意味着您不再在其上悬停，因为它已经不在了。请看这里并告诉我；）将mouseleave事件放在“.inner”而不是“.section”上，这是提琴感谢您的快速重播，所有评论和回答都非常有用，我可以找到解决方案。谢谢大家。。。
<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>

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

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

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

});