Keep hover div open after mouseleave and close it with click outside the div window or close button

I have the following jquery which opens and close the div "shopping_cart" when hover on "shopping_button"

$('#shopping_button, .shopping_cart').on('mouseenter',function(){
  $(this).css('z-index','300');
  $(this).css('visibility','visible');
 })
$('#shopping_button, .shopping_cart').on('mouseleave',function(){
  $(this).css('z-index','189');
  $(this).css('visibility','hidden');
  $(this).css('opacity','0');
 });

Need help with what I'm trying to achieve is that "shopping_cart" remain open on mouseleave and only close on if click outside the "shopping_cart" div or can add close button inside the "shopping_cart" div to close it.

Thanks guys.