Hide div when browser menu is opened

Question

I want to hide content in div when my webpage window is not active. I have tis code in jQuery:

$(window).blur(function(){
    $("#context").hide();
});

$(window).focus(function(){
    $("#context").show();
});

It works fine but if open browser menu(menu containing new tab, history... options), context doesn't hide. Is there any solution for this? Thanks

Answer 1

In short, no. There is no browser API for detecting interaction with native elements. The closest you're going to be able to get is to watch for the cursor leaving the window near the part of the browser frame that contains the menu handle. However, since each browser places this menu in a different location, you're going to end up getting into a quaqmire of UA detection, timers, and mousemove events to get it right.

Answer 2

Solution worked for me:

$(document).ready(function(){
  $("body").mouseleave(function(){
    $( "#context" ).hide();  
  });
});