Использование фокуса и размытия, чтобы показать и скрыть DIV в неупорядоченном списке

Question

Я использую обходной плагин Fred LeBlancs , и я включил лайтбокс только в «активное» центральное изображение (почему я «addClass» .active). Я также хочу показать скрытый div с текстом заголовка, когда изображение является активным. Мне удалось с лайтбоксом, но все мои подписи скрываются или отображаются, когда центральное изображение сфокусировано, и мне, конечно, просто нужен активный. Нужна помощь, чтобы показать только одну подпись.

<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>

Мой код:

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

Answer 1

Это должно работать:

$('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

Вы можете использовать это, если вы думаете о том, чтобы заголовок отображался каждый раз, когда пользователь фокусируется на изображении, и по-прежнему отображал заголовок, даже когда изображение не сфокусировано.

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