使用焦点和模糊在无序列表中显示和隐藏DIV

时间:2012-01-16 07:26:30

标签: jquery focus show-hide blur

我正在使用Fred LeBlancs roundabout plugin并且我已将灯箱合并到“活动”中央图像(为什么我“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()
});

2 个答案:

答案 0 :(得分:3)

这应该有效:

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

答案 1 :(得分:1)

如果您想在每次用户对焦图像时显示阳离子并且即使图像没有聚焦时仍然显示标题,也可以使用此选项。

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