hover effect on div using jquery

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>

Explanation:

On hover each div ( section ) it should hide and the next div( inner ) should display. On mouseleave it show as old. For this I use moseenter and mouseleave events.

Problem

On mouseenter the div blinks (happends the both events together).

Jquery

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

Please check the fiddle given below for more details

DEMO

Answer 1

This is happening because of the .hide is also firing the mouse out function..

Here is your updated Fiddle: http://jsfiddle.net/hdehzec0/12/

Consider this structure for your 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>

and your JQuery :

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

Answer 2

Fiddle : http://jsfiddle.net/hdehzec0/16/

When you enter .section it disappears therefore mouseleave function gets triggered. Instead of using .section on mouseleave use .inner since your mouse is

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

});