如何在鼠标移开时隐藏div？

Question

我正在尝试实现一个简单的悬停效果。当用户将鼠标悬停在图像（充满图像的视图）上时，它应该显示一个额外的 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< /code>，但离开 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>

我建议您看看 jQuery .hover 文档。