Question

这是我想要做的。我有一个按钮（#facek-按钮），点击后会显示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

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

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

Answer 2

<script type="text/javascript">

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

    jQuery('#facebook-button').click(function() {
        jQuery('#facebook').show();
        $('#facebook').on('mouseenter', function() {
           // do something or remove that part to just leave mouseleave
        }).on('mouseleave', function(){
              $('#facebook').hide();
        });
    });
});

</script>

基本上在显示div之后，我们只会发现他的鼠标离开#facebook div以隐藏它。您还可以优化代码并将$（'＃facebook'）放在一个变量中，考虑到您重新使用它的时间。保存您调用jquery的次数比实际需要的次数多。

Answer 3

你可以试试这样的事情。 CSS

div { display: none; }

HTML

<a id="hover" href="#">Show</a>
<div id="div">Contents</div>

JS

$('#hover')
   .mouseleave(function() {
      $('#div').hide();
   })
   .click(function(e) {
        e.preventDefault();

        $('#div').show();
    });

Answer 4

试试这个Demo。

$('.fbContent').hide();
$('button').hover(
    function() {
        $('.fbContent').show();
    },
    function() {
        $('.fbContent').hide();
    }
)

jQuery - 隐藏一个特定的div，直到另一个被点击，并在div被徘徊时再次隐藏该div

4 个答案: