How to hide div on mouseout?

I'm trying to achieve a simple hover effect. When a user hovers an image (a view filled with images), it should show an extra div. No problem there.

But when I want to do the opposite thing, hide the same div when the user leaves the area of the div, it doesn't work: the div won't go away when leaving the div area (which should be done by default when using the hover, no?).

This is the code I use:

$(document).ready(function () {
    $('.views-field-field-photo-fid').out(function () {
        showDiv($(this), $('.views-field-title'));
    });

    $('.views-field-field-photo-fid').out(function () {
        hideDiv($(this), $('.views-field-title'));
    });
});

function showDiv(sender, object) {
    $(object).show();
}

function hideDiv(sender, object) {
    $(object).hide();
}

So far, I've tried .mouseenter, .mouseleave, .hover, .out, but nothing works to hide the div after leaving the div area.

UPDATE

I found the solut开发者_Python百科ion, more or less:

 $(document).ready(function() {
        $('#uicarousel-news-preview-block-2 .views-field-field-photo-fid').hover(
            function() { $(this).find('.views-field-title').show(); },
            function() { $(this).find('.views-field-title').hide(); }
        )
   });

But since there are a lot of .views-field-title, it's hiding/showing them too. So I figured to use the find, but no solution there.

Any ideas?

There is no jQuery function called out, I am not sure whether you are using a plugin or not. Anyway, this how a correct hover declaration should look like:

<script style="text/javascript">
   $(document).ready(function() {
        $('.views-field-field-photo-fid').hover(
            function() {
                showDiv($(this), $('.views-field-title'));
            },
            function() {
                hideDiv($(this), $('.views-field-title'));
            });
    });

    function showDiv(sender, object) {
            $(object).show();
    }

    function hideDiv(sender, object) {
            $(object).hide();
    }
</script>

I suggest that you take a look at the jQuery.hover documentation.