Removing a class

Removing a class

I'm trying to remove a class from an element that holds an absolute positioned div. The problem is, it has to change it's class when the user clicks OUTSIDE the absolute-positioned div. So my code is something like this:

<a href="#" class="parent">
  <span class="absolute-positioned">Bla bla bla</span>
</a>


And my javascript is something like this:

// Show box when clicking            
  $('.parent').click(function(){
    $('.parent').removeClass("show-box"); // removing classes for all other elements
    $(this).addClass("show-box");
  })

// Hide box when mouse is out
$(".absolute-positioned").mouseout(function(){
    $('.parent').removeClass("show-box");
    return false;
  });


It works, but it only closes when the user leaves the area (which is rather small). I need to somehow make it so that the div closes when the user's mouse is outside the .absolute-positioned element AND clicks there.

Thanks for your time!