mouseleave.html

<div class="editable">
  <p>Several things to notice here:</p>
  <p>First, if the browser supports .addEventListener(..) we need to do a little extra work to support mouseenter/mouseleave.</p>
  <p>But (and I can't stress this enough), this concept is absolutely flawed! We're assuming that if the browser supports .addEventListener(..) then it must not support mouseenter/mouseleave.</p>
  <h1 class="nubbin_wrapper">Hello!</h1>
  <p>While this happens to be true at present (to the best of my knowledge) it's unwise to assume that this will always be the case. The problem is, there is no (highly reliable) way to determine whether or not a browser supports a particular event (at least not that I know of). I'm okay with this approach for now, only because we're writing the code in such a way, that even if a browser did support mouseenter/mouseleave, our custom implementation of it shouldn't cause any major problems.</p>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>
$('.nubbin_wrapper').hide();
$('.editable').mouseenter(function(){
  $(this).children('.nubbin_wrapper').fadeIn()
}) 


$('.editable').mouseleave(function(){
  $(this).children('.nubbin_wrapper').fadeOut()
})
</script>