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，但在离开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文档中take a look。

如何在mouseout上隐藏div？

1 个答案: