jQuery-隐藏特定的div直到单击另一个div，当div悬停时再次隐藏该div

Question

Here is what I am trying to do. I have a button (#facebook-button) that when clicked will show the contents of a div (#facebook). Now I want it so when the mouse is not on top (hover) of the div #facebook that it then hides the div #facebook.

Here is what I have so far:

<script type="text/javascript">

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

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

});

</script>

Any suggestions?

Answer 1

You can use jQuery's on mouseleave event, that event is fired when the mouse leaves the area.

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

Basically after showing the div, we will just spot when his mouse is leaving the #facebook div to hide it. You could also optimize the code and put $('#facebook') in a variable considering the amount of time you re use it. Saves you calling jquery more times than actually needed.

Answer 3

You can try some thing like this. 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

Try this Demo .

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