and turned on when the use mouses out of the div/class. I thought what I have here was pretty straight forward. I am surprised it didn't work, what am I missing?

2. <div class="promo">
3. <div class="offer hint--top hint--info hint--rounded hint--info" data-hint="PUT SOME COOL COPY, TO GET PEOPLE TO CLICK!!!"></div>
4. </div>
5. 
   
7. $(document).ready(function() {
8. $( '.promo' ).on('click','.offer', function(){
9. $(this).hide();
10. });
11. $( '.promo' ).on('mouseleave','.offer', function(){
12. $(this).show();
13. });
14. }); //end of document ready
15.