javascript - jQuery - 隐藏一个特定的 div 直到另一个被点击，当 div 悬停时再次隐藏那个 div

Question

这是我正在尝试做的事情。我有一个按钮 (#facebook-button)，单击它会显示 div (#facebook) 的内容。现在我想要它，所以当鼠标不在 div #facebook 的顶部(悬停)时，它会隐藏 div #facebook。

这是我目前所拥有的:

<script type="text/javascript">

jQuery(document).ready(function(){
jQuery('#facebook').hide();

    jQuery('#facebook-button').click(function() {
    jQuery('#facebook').show();
    });

});

</script>

有什么建议吗？

Answer 1

您可以使用 jQuery 的 on mouseleave 事件，当鼠标离开该区域时会触发该事件。

<script type="text/javascript">

    jQuery(document).ready(function(){
        jQuery('#facebook').hide().on('mouseleave', function() {
            jQuery('#facebook').hide();
        });

        jQuery('#facebook-button').click(function() {
            jQuery('#facebook').show();
        });

    });

</script>