javascript - 如何在鼠标移出时隐藏 div？

Question

我正在尝试实现简单的悬停效果。当用户将鼠标悬停在图像(充满图像的 View )上时，它应该显示一个额外的 div。没问题。

但是当我想做相反的事情时，当用户离开div区域时隐藏同一个div，它不起作用:离开div区域时div不会消失(应该这样做默认情况下使用悬停时，不是吗？)。

这是我使用的代码:

$(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();
}

到目前为止，我已经尝试过 .mouseenter、.mouseleave、.hover、.out、但是在离开 div 区域后没有任何方法可以隐藏 div。

更新
我或多或少找到了解决方案:

 $(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(); }
        )
   });

但由于有很多 .views-field-title，它也会隐藏/显示它们。所以我想使用find，但是没有解决办法。
有什么想法吗？

Answer 1

没有调用jQuery函数，不知道你是不是用的插件。不管怎样，正确的悬停声明应该是这样的:

<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>

我建议你take a look在 jQuery.hover 文档中。