Using focus and blur to show and hide a DIV in an unordered list

Question

I am using Fred LeBlancs roundabout plugin and I have incorporated a lightbox to the "active" central image only ( why I "addClass" .active). I also want to show a hidden div with caption text when the image is the active one. I have succeeded with the lightbox but all my captions hide or show when the central image is focused and I of course just need the active one. Need a bit of help to show just the one caption.

<li><a href="slide.jpg" rel="prettyPhoto" title="Slide">
 <img src="slide_thumb.jpg" alt="Slide" /></a>
 <div class="caption" style="display:none">Slide Caption</div>
</li>

My code:

$('ul.rbt li').focus(function() {
  $('a').addClass('active');
  $('.caption').show()
});
$('ul.rbt li').blur(function() {
  $('a').removeClass('active');
  $('.caption').hide()
});

Answer 1

This should work:

$('ul.rbt li').focus(function() {
    $(this).find('a').addClass('active');
    $(this).find('.caption').show()
});
$('ul.rbt li').blur(function() {
    $('a').removeClass('active');
    $('.caption').hide()
});

Answer 2

You could use this if you are thinking of having the caption shown everytime a user focuses on the image and still having the caption shown even when the image is not focused.

    $('ul.rbt li').focus(function() {
        $('a').addClass('active');
           $('.caption').hide()
           $('.caption').show()
        });
    $('ul.rbt li').blur(function() {
        $('a').removeClass('active');
    });