specifying a class within this

Question

I have the following markup:

<div class='mb_post'>
blah blah blah
  <div class='mb_footer'>footer info</div>
</div>

mb_footer will be display:none'd on load and then I want a mouseover to cause it to show. I have:

$('.mb_post').on('mouseover',function(){
  $(this'.mb_footer').show();
});

but it's not working. How would I specify the mb_footer only existing within this?

thx in advance

Answer 1

Nearly had it...

$('.mb_footer', this).show();

The second argument of the $ function can be the context of the selector.

Alternatively, you can do $(this).find('.mb_footer').

Answer 2

<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).on("hover", ".mb_post", function(){
        $('.mb_footer', this).show();
    })

</script>

<style>
    .mb_footer{display:none;}    
</style>

<div class='mb_post'>
    blah blah blah
    <div class='mb_footer'>footer info</div>
</div>