title: Problem with jQuery mouseleave firing when container has select box
body: <p>I have a two containers -- one is nested inside of another.  When I hover over the parent, I want the child container to appear. When I mouseout, I want the child container to fadeout. The problem I'm having is the child container has a form that contains a "select box". When the user selects the select box -- the mouseleave event is accidentally fired. </p>
  
  <p>How can I stop the select box from tripping the mouseleave event?</p>
  
  <p>You can see my working code here: <a href="http://jsfiddle.net/rsturim/9TZyh/3/" rel="noreferrer">http://jsfiddle.net/rsturim/9TZyh/3/</a></p>
  
  <p>Here's a summary of my script:</p>
  
  <pre><code>$('#parent-container').live("mouseenter", function () {
      var $this = $(this),
      $selectOptionsContainer = $this.find('#child-container');
      $selectOptionsContainer.stop().fadeTo('slow', 1.0);
  }).live("mouseleave", function (e) {
      var $this = $(this),
      $selectOptionsContainer = $this.find('#child-container');
      $selectOptionsContainer.stop().hide();              
  });
  </code></pre>
  
  <p><strong>edit</strong>: appears fine in WebKit-based browsers. Fails in Firefox and IE7-IE9.</p>