Eu tenho o jQuery desvanecendo aqui:http: //dougie.thewestharbour.com

Quando você passa o mouse sobre a div .main-overlay, eu gostaria que desapareça e quando você tira o mouse, eu gostaria que ela desaparecesse.

No entanto, você pode ver que está apenas piscando agora. Acho que é porque o div desaparece, por isso é tratado como um mouseout quando desaparece, mas não sei ao certo como resolvê-lo.

Aqui está o meu javascript:

    $(document).ready(function () {


    $('.main-overlay').hover(

        //Mouseover, fadeIn the hidden hover class 
        function() {

            $(this).fadeOut('1000');

        },

        //Mouseout, fadeOut the hover class
        function() {

            $(this).fadeIn('1000');   

    }).click (function () {

        //Add selected class if user clicked on it
        $(this).addClass('selected');

    });

});

E aqui está um dos itens aos quais a div de sobreposição está anexada:

<li><div class="main-overlay"></div><span class="caption">The store front</span><img src="http://dougie.thewestharbour.com/wp-content/uploads/store-front.jpg" alt="store front" title="store-front" width="730" height="360" class="alignnone size-full wp-image-98" /></li>

Obrigado

Wade